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

Question

is it possible to remove all the div element only from the parent (with class name container) without removing the ul element inside the foo-1 class ?

<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

You can exclude any element containing such an 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> 

This keeps the entire .foo-1 element.
If you wanted to remove the parent .foo-1 as well, you would have to call $('.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> 

Both of these would keep all events and associated data that might be attached to the element.

Answer 2

I would clone the ul element, remove the div inside the container, and then append the ul back in. Not sure why you'd need to do that but if I needed to that is how I'd do it.

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

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

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

Answer 3

It occurs to me two solutions:

• First, put the content of class container into a variable, then erase the div with class container and add the contents of the variable to where that div was,
• Second, if you only want to delete the css applied to the div with class container you can delete the class from that div.

I hope it helps you.

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> 

First I'm traversing through all the children then appending their inner html to the parent ie. container.This will help you get all the html inside the child divs get out and append it to the parent.The following will remove all the containers only the html will be left remaining.

 $(".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

Try with unwrap(); Example :

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