How to remove div from parent

Question

<div id="abc">    
    <div style="">
       <div style="">...</div>
    </div>
    <div class="gm-style-iw">
    ...
    </div>
</div>

and my jquery:

var iwOuter = $('.gm-style-iw');
iwOuter.parent().remove();

How to remove parent of this div, to show html:

<div id="abc">
    <div class="gm-style-iw">
    ...
    </div>
</div>

Answer 1

The div you wanted to remove is immediate previous sibling of .gm-style-iw element and not its parent. you need to use .prev() selector along with .gm-style-iw selector to target it:

$('.gm-style-iw').prev().remove();

working demo

Answer 2

您可以使用

$( ".gm-style-iw" ).siblings().remove();

Answer 3

Try using :not() to exclude .gm-style-iw from being removed from #abc parent element

 $("#abc div:not(.gm-style-iw)").remove() 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> <div id="abc"> <div style=""> <div style="">style ...</div> </div> <div class="gm-style-iw"> gm-style-iw... </div> </div> 

Answer 4

You can use :not() to exclude your elements to not be removed:

 $('#abc > div:not(.gm-style-iw)').remove(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="abc"> <div style=""> <div style="">to be removed...?</div> </div> <div class="gm-style-iw"> gm-style-iw </div> </div> 

---

Issue with your code:

var iwOuter = $('.gm-style-iw'); // selector : correct
iwOuter.parent().remove(); // but the target element is not the parent
                           // that is sibling of it.