使用 jQuery 从父元素中删除 div 子元素

Question

是否可以仅从父级(使用类名容器(中删除所有div元素，而无需删除foo-1类中的ul元素？

<div class="container">
<div class="foo-1">
<ul class="toon">
<li>li 1</li>
<li>li 1</li>
</ul>
</div>
<div class="foo-2">foo 2</div>
</div>

Answer 1

您可以排除任何包含此类 UL 的元素

$('.container').children(':not(:has(ul.toon))').remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="foo-1">
<ul class="toon">
<li>li 1</li>
<li>li 1</li>
</ul>
</div>
<div class="foo-2">foo 2</div>
</div>

这将保留整个.foo-1元素。
如果还想删除父.foo-1，则必须调用$('.toon').unwrap()

$('.container').children(':not(:has(ul.toon))').remove();
$('ul.toon').unwrap();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="foo-1">
<ul class="toon">
<li>li 1</li>
<li>li 1</li>
</ul>
</div>
<div class="foo-2">foo 2</div>
</div>

这两者都将保留可能附加到元素的所有事件和关联数据。

Answer 2

我会克隆 ul 元素，删除容器内的div，然后将 ul 重新附加回去。不知道为什么你需要这样做，但如果我需要这样做，那就是我会这样做的。

var toon = $(".toon").clone();
$(".container").children().remove();
$(".container").append(room);

Answer 3

我想到了两个解决方案：

首先，将类容器的内容

• 放入变量中，然后使用类容器擦除div 并将变量的内容添加到该div 所在的位置，
• 其次，如果您只想删除应用于带有类容器的div 的 css，则可以从该div 中删除该类。

我希望它对你有所帮助。

Answer 4

$(".container").children().each(function(){
$(this).html();
$(this).parent().append($(this).html());
$(this).remove();
});
console.log($(".container").html());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="foo-1">
<ul class="toon">
<li>li 1</li>
<li>li 1</li>
</ul>
</div>
<div class="foo-2">foo 2</div>
</div>

首先，我遍历所有子项，然后将它们的内部 html 附加到父项 ie. 容器。这将帮助您获取子div中的所有html并将其附加到父div。以下内容将删除所有容器，只保留 html。

$(".container").children().each(function(){
$(this).unwrap();
});
console.log($(".container").html());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="foo-1">
<ul class="toon">
<li>li 1</li>
<li>li 1</li>
</ul>
</div>
<div class="foo-2">foo 2</div>
</div>

Answer 5

尝试使用 unwrap((; 例：

$(".toon").unwrap();