How to get element html() and edit or remove some classes/elemetns

Im trying to get the html of container and remove some useless element and classes before send to Database but i dont know why this is not working

$('button').click(function(){
  var html = $('.wrapper-container').html();
  
  $(html).find('.single-col').removeClass('.single-col')
  $(html).find('p').remove();
  console.log(html);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<div class="wrapper-container">
  <div class="single-col">Hello</div>
  <div class="single-col">World</div>
  <p>Junk text</p>
</div>

<button type="button">Clear html</button>

Answer

I’d suggest the following approach, instead of trying to modify a string use a cloned element, or document fragment:

$('button').click(function() {
  // using 'let' instead of 'var' to scope the variable to
  // local block; and using the .clone() method, with
  // the (Boolean) true argument to include the descendant
  // elements (but without cloning event-handlers):
  let clone = $('.wrapper-container').clone(true);

  // here we find the '.single-col' elements in the
  // cloned node, and remove that class (this doesn't
  // remove the class attribute, just the class-name):
  clone.find('.single-col').removeClass('single-col');

  // here we find the <p> element(s), and remove them:
  clone.find('p').remove();

  // here we append the cloned element, using the append()
  // method, to the #resultingDOM element:
  $('#resultingDOM').append(clone);

  // here we update the text of the #resultingHTML
  // element, using the text() method, to the innerHTML
  // of the cloned .wrapper-container elememt:
  $('#resultingHTML').text(
    clone.html()
  );
  console.log(clone);
})
*,
 ::before,
 ::after {
  box-sizing: border-box;
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}

.wrapper-container {
  margin: 1em auto;
  width: 80vw;
}

.single-col {
  --color: #f90;
}

.wrapper-container :not(div) {
  --color: lime;
}

.wrapper-container>* {
  background-image: linear-gradient(90deg, var(--color, aqua), #fffa);
}

.wrapper-container::before,
.wrapper-container>*[class]:not([class=""])::before {
  content: '(.' attr(class) ')';
}

#resultingHTML {
  white-space: pre-wrap;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<div class="wrapper-container">
  <div class="single-col">Hello</div>
  <div class="single-col">World</div>
  <p>Junk text</p>
</div>

<button type="button">Clear html</button>

<!-- two new elements to show the results, one is the DOM
     produced by jQuery manipulation of the clone, the
     other is to show the resulting HTML string from that
     DOM manipulation: -->

<div id="resultingDOM"></div>
<div id="resultingHTML"></div>

References: