删除使用jQuery动态创建的元素

Question

I created a element and text with jQuery to overlay another element:

$("<div></div>").text("winner")
                .css( {position:"absolute", top:"48%", left:"40%", zIndex:9999} )
                .appendTo( $(".square2").css({position:"relative"}) )

Afterwards I need to remove it, so I checked the position of the element in Chrome:

<div class="square2">
   <p>Something</p>
   <p>Something</p>
   <table></table>
   <div>winner</div>
</div>

And finally I tried to remove selecting it as last child:

$("div.square:last-child").remove();

But it removes all the children of div.square, not only the last one.(???)

Answer 1

You can use it:

var el = $("<div></div>").text("winner")
                    .css({
                            position:"absolute",
                            top:"48%",
                            left:"40%",
                            zIndex:9999,
                    });
    el.appendTo($(".square2").css({position:"relative"}));
    el.remove();

Answer 2

To remove the last div inside .square you could use :

$("div.square div:last-child").remove();

Hope his helps.

 $("div.square div:last-child").remove(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="square"> <p>Something</p> <p>Something</p> <table></table> <div>winner1</div> <div>winner2</div> <div>winner3</div> </div> 

Answer 3

 $(document).ready(function(){ $("<div>winner1</div>") .css({ position:"absolute", top:"48%", left:"40%", zIndex:9999, }).appendTo($(".square2").css({position:"relative"})); /*binding the rmeove on click of button. Can change it according to your needs.*/ $("#remove").click(function(){ $('.square2 div:last-child').remove(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="square2"> <p>Something</p> <p>Something</p> <table></table> <div>winner</div> </div> <button type="button" id="remove">Remove</button> 

Hope this helps.

Answer 4

If you're okay with a pure jQuery answer, you could use the following:

$('.square').children().filter('div').last().remove()

This will take the element(s) with class square , select all it's(or their) children, filter so only the div elements are still selected, narrow that down by only selecting the last element in that list, and then finally remove that element. Hope this is what you were looking for.