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

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，除了主要的 (我的意思是最上面的) 但保留其子项。

很难用英语解释，我寻求的输出是:

<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 class 的 beween 中的 div 已经消失，但那些 div 的子级仍然存在。

我想用 jQuery 试试这个，但是这里有一些我想实现的逻辑(我知道下面的代码失败得很惨)，所以，我想问一下如何用 jQuery 实现这个。

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