Question

这是我的HTML：

<span >I</span>
<span > </span>
<span class="highlight">
<span >l</span>
<span >i</span>
<span >v</span>
<span >e</span>
<span > </span>
</span>
<span >h</span>
<span >e</span>
<span >r</span>
<span >e</span>

我想删除类为“ highlight”的元素，并保留其子元素。我所做的是toRemove.outerHTML = toRemove.innerHTML;，它工作正常，但是当我检查更新的HTML时，它会在“活动”周围创建一个空的span元素。有什么方法可以删除父元素并保留其子元素而不创建空的span元素？谢谢。

更新：感谢您的所有回答。如果我只允许使用纯Javascript，而不允许Jquery这样做怎么办？

Answer 1

使用insertAfter在包装元素之后插入子元素以保持位置。然后detach()或remove()包装器。

$('#fixit').on('click', function(e) {
  var $highlight = $('.highlight');
  var $children = $highlight.children();
  $children.insertAfter($highlight);
  $highlight.remove();
  
});

body > span {
 background-color: gold;
}
.highlight {
   background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span >I</span>
<span > </span>
<span class="highlight">
  <span >l</span>
  <span >i</span>
  <span >v</span>
  <span >e</span>
  <span > </span>
</span>
<span >h</span>
<span >e</span>
<span >r</span>
<span >e</span>
<button id="fixit">Fix it</button>

如果您使用detach()删除该元素，则可以将其存储在变量中，以便以后在需要“还原更改”并保留对子项的引用并再次添加时重新附加它

+function() {
  var $highlight = null;
  var $children = null;
  $('#fixit').on('click', function(e) {
    if($highlight == null) {
      $highlight = $('.highlight');
      $children = $highlight.children();
      $children.insertAfter($highlight);
      $highlight.detach();
      }
    else {
       /** get the first child position, otherwise there are four wrappers **/
       $highlight.insertAfter($children.first());
       $highlight.append($children);
       $children = null;
       $highlight = null;
    }
  });
}();

body > span {
 background-color: gold;
}
.highlight {
   background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span >I</span>
<span > </span>
<span class="highlight">
  <span >l</span>
  <span >i</span>
  <span >v</span>
  <span >e</span>
  <span > </span>
</span>
<span >h</span>
<span >e</span>
<span >r</span>
<span >e</span>
<button id="fixit">Fix it</button>

注释中要求的纯JS解决方案：

var fixit = document.getElementById('fixit');
fixit.addEventListener('click', function(e) {
  // get all elements with marker class. 
  var highlights = document.getElementsByClassName('highlight');
  if(highlights.length) {
    // iterate them all
    for(c = 0; c < highlights.length;c++) {

        var highlight = highlights[c];
        var children = highlight.children;
        // get all the children, last first then add them to parent so order is preserved
        for(i = children.length-1; i > -1; i--) {
            highlight.parentNode.insertBefore(children[i], highlight.nextSibling);
        }
    }
    // remove the marked elment.
    highlight.parentNode.removeChild(highlight);
  }
  
});

body > span {
 background-color: gold;
}
.highlight {
   background-color: red;
}

<span >I</span>
<span > </span>
<span class="highlight">
  <span >l</span>
  <span >i</span>
  <span >v</span>
  <span >e</span>
  <span > </span>
</span>
<span >h</span>
<span >e</span>
<span >r</span>
<span >e</span>
<button id="fixit">Fix it</button>

Answer 2

unwrap（）：：从DOM中删除匹配元素集的父元素，将匹配元素留在原处。

您可以像这样简单地使用jQuery方法 .unwrap() ：

 $(toRemove).unwrap();

Answer 3

您可以使用jQuery的.contents()获取Get每个元素的子元素，包括text和comment节点。

您可以执行以下操作：

var data = $(".highlight").contents();
$(".highlight").replaceWith(data);

.highlight { background-color:blue }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span >I</span>
<span > </span>
<span class="highlight">
<span >l</span>
<span >i</span>
<span >v</span>
<span >e</span>
<span > </span>
</span>
<span >h</span>
<span >e</span>
<span >r</span>
<span >e</span>

Answer 4

保存原件的孩子的副本后，将其取出，然后将其放回适当的位置。（或者之前或之后的感觉。）

演示：

https://jsfiddle.net/xpvt214o/513654/

var highlight = $(".highlight");

var children = highlight.children()

highlight.remove()

$('span').each(function(i,e){
  if (i == 1)
  $(this).after(children);
});

如何在不创建空跨度的情况下删除父元素并保留其子元素

4 个答案: