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

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 时，它会在“live”周围创建空的 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>