iKonenn iKonenn - 1 month ago 15
HTML Question

jquery remove nodes and keep children

I am very ashamed to post this question but I have not managed to get use of unwrap or replaceWith methods in Jquery for that need.

My problem is simple : I need to remove some nodes (jquery selectors) of an html code without losing the children of these nodes.

Here is a Jsfiddle that demonstrate the result of my unsightly code used to reach my goal https://jsfiddle.net/uddaeh1u/15/ (yes it's works...)

// var content : the html source code of the wysiwyg

var result = '';
$(content).contents().each(function(){
var addContent = '';
// textNode
if(this.nodeType == 3) {
// Text Node
result+= $(this).text();
} else if(this.nodeType == 1 && $(this).hasClass('atwho-inserted')) {
// if is an Object Node with the target class
// I only keep it's contents (means that ".atwho-inserted" is not kept)
result+= $(this).html();
} else {
// in any other case I keep it entirely
result+= this.outerHTML;
}
});


Could you find me a really better code (with unwrap method) ?

Thank you a lot :)

Answer

I think this one would please you. Notice modification of var tmp

$(document).ready(function(){
  var content = $('.start').html();
  $('.startCode code').text(content);
  
  var tmp = $(content);
  $('.atwho-inserted', tmp).children().unwrap();
  var result = tmp.html();
  
  $('.result').html(result);
  $('.resultCode').text(result);
});
body{
  padding:10px;
}
.atwho-inserted{
  background-color:red;
}
pre code, .wrap{
  white-space: pre-line;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="container">
  <div class="row">
    <div class="col-xs-6">
      <div class="well">All selectors ".atwho-inserted" are in "background-color:red" and have to be removed without losing its children.</div>
      <hr/>
      <div class="start">
        <p>
          <span class="atwho-inserted" data-atwho-at-query="@fac" contenteditable="false">
            <span class="user_mention" data-identifier="8930">@facticeuserr</span>
          </span>
          <br /> some lorem ipsum text
          <span class="atwho-inserted" data-atwho-at-query="#acc" contenteditable="false">
            <span class="tag_mention" data-identifier="484">#accessibilité</span>
          </span>
          <br>
          <img src="http://lorempixel.com/100/100/" data-filename="3">
          <br />
          <b>hello</b>
          <br>
          <span class="atwho-inserted" data-atwho-at-query="#acc" contenteditable="false">
            <span class="tag_mention" data-identifier="653">#Accompagnement</span>
          </span>
        </p>
      </div>
      <pre class="startCode"><code></code></pre>
    </div>
    <hr/>
    <div class="col-xs-6">    
      <div class="well">Here the result<br /> it's works but code is not optimized</div>
      <hr/>
      <div class="result"></div>
      <pre class="resultCode"><code></code></pre>
    </div>
  </div>
</div>