JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<body>
  <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>
        <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>
      <div class="col-xs-6">    
        <div class="well">Here the result<br /> it's works but code is not optimized</div>
        <div class="result"></div>
        <pre class="resultCode"><code></code></pre>
      </div>
    </div>
  </div>  
</body>

SCSS

body{
  padding:10px;
}
.start, .result{
  .atwho-inserted{
    background-color:red;
  }
}
pre code, .wrap{
  white-space: pre-line;
}

JavaScript

$(document).ready(function(){
  var content = $('.start').html();
  $('.startCode code').text(content);
  
  /**
  * here is my disgusting code that probably can works 
	* with replaceWith() or unwrap() methods
  */
  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 {
			// if it's an Object Node, I keep it entirely
      result+= this.outerHTML;
    }
  });
  
  $('.result').html(result);
  $('.resultCode').text(result).addCl;
});