Question

我尝试使用unwrap删除父元素。我按照文档进行操作，但它没有工作;我有这样的Html：测试HTML

我写了这个函数来克隆和解包它：

var htmlTemplate = $('#htmlTemplate').clone().removeAttr('id').unwrap();

当我运行此代码时，模板仍然具有外部跨度。有谁知道如何妥善解开这个？

Answer 1

要打开一个元素，它应该有一个父元素。您正在创建一个DOM片段并尝试解包它。但它没有父母。

说，有一些dom：

<button>unwrap</button>
<div class="outer"></div>

在父母到位的情况下，解开会很顺利：

var inner = '<span class="inner">test html</span>',
        $outer = $('.outer');

// First you would want your element to get a parent.
$outer.html(inner);


// Then unwrap it
$('button').on('click', function() {
    $('.inner').unwrap();
});

这是fiddle

因此，如果你想要移除外跨度，你应该瞄准内部跨度，它将展开。

对于更新的片段： .clone（）不复制任何父级，它只复制元素及其所有后代。因此，当您使用clone时，您将在所选元素上使用root构建一个单独的片段。

.unwrap（）删除匹配元素的父级。因此，要解开内部跨度，必须使用jQuery选择它。

<div class="outer"></div>

JS

var html = "<span><span class='inner'>test html </span></span>";

var $html = $(html);

var unwraped = $html.find('.inner').unwrap();

$('.outer').html(unwraped);

另一个fiddle

<强> UPD：

遍历DOM并修改它之间存在差异。当你使用.find（）时 - 你正在遍历（从元素移动到元素）。 DOM树的结构保持不变。当你使用.unwrap（）时 - 你正在改变结构（从DOM中删除一个元素）。

Answer 2

解包不适用于字符串，适用于DOM元素。

.unwrap（）方法删除元素的父级。这实际上是.wrap（）方法的反转。匹配的元素（以及它们的兄弟，如果有的话）在DOM结构中替换它们的父节点。

更多详情：https://api.jquery.com/unwrap/

var html = $('span'); 
html.unwrap('span');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<p id="html">
  <span><span>test html </span></span>
<p>

Answer 3

尝试unwrap如下

var html = "<span><span>test html</span></span>"
html = $(html).unwrap();
$(html).unwrap();

Answer 4

.unwrap()方法删除元素的父级。

所以说，span必须是一个元素。

var gameOfThronesChars = $('p'); // Create an element.

$( "button" ).click(function() {
  if ( gameOfThronesChars.parent().is( "div" ) ) {
    gameOfThronesChars.unwrap();
  } else {
    gameOfThronesChars.wrap( "<div></div>" );
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>


<style type="text/css">
  div {
    border: 2px solid #c00;
  }
</style>

<button>Wrap/Unwrap</button>

<p>Tyrion Lannister</p>
<p>Cersei Lannister</p>
<p>Sansa Stark</p>
<p>Arya Stark</p>

jQuery unwrap不起作用

4 个答案: