Jquery: click event to remove() image element click on and adjacent image element

Question

This is prob a quite weird or simple error. But it's doing my head in lol. The code below is a click event handler aimed at 2 <img> elements. You click on the one <img> element classed "undo" - This should remove the <img> being clicked and also the element classed "bin" directly next to it at the same time. I manage to either the one or the other removed but not both. Can anyone help please? Thank you Walter

JS:

$('ul').on('click','.undo',function(e) {
    $(this).remove();   
    $(this).prev().remove();

HTML:

<img src="images/bin.png" align="right" class="bin">
<img src="images/undo.png" align="right" class="undo">

Answer 1

Once you call $(this).remove(); , the element is removed from the dom, thereafter $(this).prev() will not find any element as there won't be any previous sibling for the detached element

$('ul').on('click', '.undo', function (e) {
    $(this).prev().addBack().remove();

Or

$('ul').on('click', '.undo', function (e) {
    $(this).prev().remove();
    $(this).remove();

Answer 2

Swap the removal process instead as below:

$('ul').on('click','.undo',function(e) {
    $(this).prev().remove(); 
    $(this).remove();   
});

DEMO

What you are doing here is trying to remove the previous element once the current element has been removed and jquery will not be able to find this element once removed, to remove its previous element. So just remove its previous element first and then remove the current element.

Answer 3

I played around with the rest of my code and realised the problem lies there. The problem comes in with bubbling effect and that the items were added after the page loaded via the DOM.

Thanks for looking into - I need to go analyse other bits of my code causing this not to work.