Jquery删除节点并保留子节点

Question

我很惭愧发布这个问题，但我没有设法在Jquery中使用unwrap或replaceWith方法来满足这种需要。

我的问题很简单:我需要删除html代码的一些节点(jquery选择器)，而不丢失这些节点的子节点。

这是一个Jsfiddle，演示了我的不美观的代码用来达到我的目标https://jsfiddle.net/uddaeh1u/15/(是的，它的工作…)

// 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;
    }
});

你能找到一个真正更好的代码(unwrap方法)吗?

谢谢你:)

Answer 1

我想这个会让你满意的。变量tmp修改通知

$(document).ready(function(){
  var content = $('.start').html();
  $('.startCode code').text(content);
  
  var tmp = $(content);
  $('.atwho-inserted', tmp).children().unwrap();
  var result = tmp[0].outerHTML; // or tmp.html(); but would lose the outermost tag
  
  $('.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>

Answer 2

如果您的意图是只删除span.atwho-inserted而不删除其子元素，并且DOM的其余部分保持不变，您可以这样做:

$('.start .atwho-inserted').children(':first-child').unwrap();

首先选择类为.atwho-inserted的元素，然后找到它们各自的第一子元素并执行unwrap。

unwrap删除选择器直接父包装器，并留下子包装器。

你可以走了!

Answer 3

基本上outerHTML就是你想用innerHTML代替的(unwrap)检查https://developer.mozilla.org/en-US/docs/Web/API/Element/outerHTML Browser_compatibility

$('#trigger').click(function() {
  $(this).hide();
  $('.atwho-inserted').each(function() {
    this.outerHTML = $(this).html();
  });
});

body{
  padding:10px;
}
.atwho-inserted{
  background-color:red;
}
pre code, .wrap{
  white-space: pre-line;
}
#trigger {
  font-size: 1.5em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="trigger">Click to trigger edition</button>
<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>

Answer 4

这是我添加unwrap()解决方案的另一个JsFiddlehttps://jsfiddle.net/uddaeh1u/21/

$(content).find('.atwho-inserted').children(':first-child').unwrap();

我认为问题是unwrap()只返回未包装的jquery对象，只能应用于DOM(不是从一个变量视为一个DOM对象)。