Question

以下面的简单格式：

<div class="par">
    <div class="chl"> Child 1</div>
    <div class="chl"> Child 2</div>

    <div class="par"> Child as Parent 

        <div class="chl"> Child 3</div>
        <div class="chl"> Child 4</div>

    </div>

    <div class="chl"> Child 5</div>

    <div class="par"> Child as Parent 

        <div class="chl"> Child 6</div>
        <div class="chl"> Child 7</div>

    </div>
    <div class="chl"> Child 8</div>
</div>

包含 par 类的主div也有一些子DIV与其父级具有相同的类（ par ）。我想删除 par 类的DIV，除了主（我的意思是前面的第一个），但保留其子节点。< / p>

安静很难用英语解释，我寻求的输出是：

<div class="par">
    <div class="chl"> Child 1</div>
    <div class="chl"> Child 2</div>

    <div class="chl"> Child 3</div>
    <div class="chl"> Child 4</div>

    <div class="chl"> Child 5</div>

    <div class="chl"> Child 6</div>
    <div class="chl"> Child 7</div>

    <div class="chl"> Child 8</div>
</div>

具有 par 类的be之间的Div已消失，但这些div的子节点仍在那里。

我想用jQuery尝试这个，但是这里有一些逻辑我想实现（我知道下面的代码很难失败），所以，我问如何用jQuery实现这个。< / p>

if($('div.par').parent('div.par').has('div.par')) {
    $('div.par').parent('div.par').unwrap();
}

JSFiddle

Answer 1

您可以使用：

$('.par .par>.chl').unwrap();

如果您要删除文字Child as Parent，请将contents()与filter()一起使用：

$('.par').contents().filter(function() {
    return this.nodeType == 3    
}).remove();

<强> Updated Fiddle

Answer 2

这是一种相对简单的方法：

$('.par')                      // find all .par elements
  .children('.par')            // having .par children
  .replaceWith(function() {    // and replace them
    return $(this).children(); // with their own children
  });

如果您使用unwrap()，这可以避免再次删除文本节点。

Demo

检查子元素是否与父元素具有相同的类并删除子元素 - jQuery

2 个答案: