CODEWITHSUNDEEP
javascriptjquerydom
Javaaaa
Javaaaa

Reputation: 3804

Getting DOM of object user clicks on

Ok people can make a list on my website by pushing the ADD button. the code to do this is as follows (using jquery):

<script type="text/javascript">
 function voegToe(){
 $('#sortable1').append("<li class='ui-state-default'>" + $('#product').html() + $('#eiwit').html() + " <button id='voegtoe' class='zoek' type='button' onClick='deleteObject();'>del</button></li>");
 }
</script>

so pushing the button adds a LI element in the UL#sortable1 which also has a delete button in it. Now I want to make an event that when the users clicks the delete button of a certain list item, that list items is removed from the list.

How can I do this? because now when a list is made, all the li id's or classes are the same, so I can't use that to specify which element should be removed. So how can I say: delete only the LI of which the delete button was pressed?

    <script type="text/javascript">
     function voegToe(){
      $('??????').remove();
     }
    </script>

Upvotes: 0

Views: 70

Answers (2)

PleaseStand
PleaseStand

Reputation: 32082

Using jQuery 1.4.2+:

$('#sortable1').delegate('button', 'click', function() {
    $(this).parent().remove();
});

By the way, you shouldn't have duplicate IDs, but rather you should use another class instead. Elements can be part of multiple classes; the class HTML attribute is a space-separated list.

Upvotes: 2

icktoofay
icktoofay

Reputation: 129001

$('.zoek').live('click', function() {
    $(this).parent().remove();
});

Upvotes: 2

Related Questions