JQuery - select an entire item except one specific item nested inside

Question

Is it possible to select an element, but without one of the elements, inside of which is inside inside, if the identifiers of both elements are known?

as:

<div id="outerdiv">
    <div>
        <div id="innerdiv1"> </div>
        <div id="innerdiv2"> </div>
    </div>
</div>

I want to make a choice that will return an external div, but without innerdiv2, like this:

<div id="outerdiv">
    <div>
        <div id="innerdiv1"> </div>
    </div>
</div>

There is an instruction like $ ('# outerdiv'). not ('# innerdiv2') or something that could do the trick? I can solve this with clone () + remove (), but I'm just wandering around, there is a chance to do it this way.

thank

Answer 1

Here you,

$('#outerdiv div:not(#innerdiv2)')

with external div enabled:

$('#outerdiv div:not(#innerdiv2),#outerdiv')

This is a valid CSS3 selector; it also works in jQuery.

---

To answer your comment, I did a little test in the browser console:

a = $('<div id="a"><div id="wrap"><div id="one"></div><div id="two"></div></div>')
a.find('div:not(#two)').addClass('a')

Result:

<div id=​"wrap" class=​"a">​
<div id=​"one" class=​"a">​</div>​
<div id=​"two">​</div>​
</div>​

html() HTML . : [#outerdiv, div, # innerdiv1]. , html() html #outerdiv. HTML #innerdiv2, :

$('#innerdiv2').detach()
$('#outerdiv').html()

Answer 2

, , html, , html, #selector. :

$(document).ready(function(){
    var clone = $('#outerdiv').clone()
    $(clone).hide();
    $('body').append(clone);
    $(clone).attr('id','cloneddiv');
    $('#' + $(clone).attr('id') + ' #innerdiv2').remove();
    console.log($(clone));
$(clone).remove();
});

.log() Firebug. , , .

, - , . , ...