Q:

removing div child from parent element with jquery

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>

A:

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.

