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

您可以排除包含此类

的任何元素

$('.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附加回来。不确定为什么你需要这样做但是如果我需要那就是我怎么做的。< / p>

var toon = $(".toon").clone();

$(".container").children().remove();

$(".container").append(room);

Answer 3

我遇到两个解决方案：

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

我希望它可以帮到你。

Answer 4

＆＃13;

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

＆＃13;

<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>

＆＃13;

首先，我遍历所有孩子，然后将他们的内部html附加到父母，即。 container.This将帮助你获取子div中的所有html出来并将其附加到父级。以下将删除所有容器，只剩下html。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 5

尝试使用unwrap（）; 示例：

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

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

5 个答案: