How to remove previous li on anchor click

Question

I am setting some <li> and anchor tag using jQuery . Now i want to remove the attach li on anchor click.Let me show on code what I am trying to do.And I can't assign any id to these elements as they are generating dynamically.

 <ul id="imagess">
<li><img width="60" height="60" src="http://example.com/images/event.png"></li><a href="javascript:void(0);" onclick="deleteit('event.png')"> <img style="float: left;   margin-left: -25px;margin-top: 60px;" src="http://example.com/images/delete.png"></a>    
<li><img width="60" height="60" src="http://example.com/images/event2.png"></li><a href="javascript:void(0);" onclick="deleteit('event2.png')"> <img style="float: left;   margin-left: -25px;margin-top: 60px;" src="http://example.com/images/delete.png"></a>
</ul>

I am trying to remove the <li> on deletit() js function call

Answer 1

A solution for your current HTML using event delegation.

$(document).on('click', 'li + a', function(){
    $(this).prev().remove();
})

However, your HTML/JS should look more like this to be valid:

 $(document).on('click', '#imagess li a', function(){ console.log(this); $(this).closest('li').remove(); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul id="imagess"> <li> <img width="60" height="60" src="http://example.com/images/event.png"> <a href="javascript:void(0);"> <img style="float: left; margin-left: -25px;margin-top: 60px;" src="http://example.com/images/delete.png"> </a> </li> <li> <img width="60" height="60" src="http://example.com/images/event2.png"> <a href="javascript:void(0);"> <img style="float: left; margin-left: -25px;margin-top: 60px;" src="http://example.com/images/delete.png"> </a> </li> </ul> 

Answer 2

You have the jQuery tag, so here is an example with that:

$(this).closest('li').prev().remove();

Update: from the wording of question details and your comment, it sounds like path is the anchor itself, and that you don't want to remove previous li , but the container li itself, if so, change to:

$(path).closest('li').remove();

Update 2

Check this:

$('#imagess').on('click', 'a', function() {
    $(this).prev('li').remove();
    return false;
})

However, this is only for your invalid HTML, where the <a> lives directly inside <ul> . In correct way, the <a> should be inside the <li> , which I see is now fixed in another answer.

Answer 3

$('ul a').click(function() {
    $(this).prev().remove();
});

prev() gets the previous sibling to the a element, which is the li . remove() is pretty self explanatory.

Also, your HTML is invalid. The only elements allowed as direct children of ul are li elements.

Edit: The answers with "closest" given above will be correct if you move the a inside the li . People are assuming they're already in there as the HTML is invalid otherwise.

Answer 4

Update : remove inline onclick attribute from a tag as you have defined click event in code itself Previous fiddle : http://jsfiddle.net/Lp88exqb/ New Fiddle : http://jsfiddle.net/Lp88exqb/1/

You should not have a tag as direct child of ul tag, it should be in li tag and than you have to use following code to remove previous li on any click

$('ul a').click(function() {
$(this).parent().prev().remove(); 
});

Answer 5

1. Step 1
   Your HTML CODE has to be like this
   -------------------------------------
    <code>
     <ul id="imagess">
         <li>Img1</li>
            <a href="javascript:void(0);" onclick="deleteit(this)">Img1</a> 
         <li>Img2</li>
            <a href="javascript:void(0);" onclick="deleteit(this)">Img2</a>
     </ul>
    </code>
-------------------------------------------
2. Write a JS Funcion like this
-------------------------------------------
   function deleteit(obj){
       $(obj).prev('li').remove();
    }