Remove item from array using jQuery button

Question

I have a list, which has an image, and an 'x' image (Close.gif) I am not sure how to make the ListItem be removed when the 'x' image is clicked.

<ul id="cardList" class="cardList">    
    <li id="1" class="ui-state-default" data-type="cover" onclick="onClickCard(this)">
    Cover 00 
    <img src="./Close.gif" alt="" onclick="onClickClose(this)"/>
    </li>
</ul>

I only know how to have the image removed when the 'x' mark is clicked.

var onClickCard = function(asd){
    $(asd).remove();
}

Answer 1

I assume that your onClickCard function is used to remove list items when you click on the list item itself and the function you want to handle here is onClickClose

After that, to solve your problem you can use .parent() or .closest() to remove parent li of clicked image:

var onClickClose = function(asd){
    $(asd).parent().remove(); // or .closest('li').remove()
}

Answer 2

First of all, you've got the name of the function wrong if you want it to fire when you click the image.

Change your function to this...

var onClickClose = function(asd){
    $(asd).closest("li").remove();
}

Answer 3

You can try with closest()

var onClickClose= function(asd){
    $(asd).closest("li").remove();
}

Answer 4

try this:

var onClickClose = function(asd){
   $(asd).closest('li').remove();
}