删除单击元素的父级

Question

I'm trying to "hide" an element when an ajax to a file returns true. When I click on the id of #delete , an ajax request is sent to a file that handles data which will return passed or failed. If the file returns 'passed', I then want to hide the parent to show it was 'deleted'.

It's a list of items that are displayed dynamically. Each item has an 'x' that when clicked, the user is prompted to hit confirm or cancel to remove that item from the list. When the user hits confirmed, an ajax request is called to a file that will send the string 'passed' or 'failed'.

This is what happens on the javascript side:

$('#delete').on('click', function() {

    var $that = $('#delete');

    bootbox.confirm("Are you sure you want to delete this event?", function(r) {

        // r is the result, true or false

        if(r) {

            $.post('panel', {"id": $that.data('id')}, function(data) {

                if(data.status === 'passed') {

                    $that.parent().fadeOut();

                }

            });

        }

    })

});

---

All this works, but only for the first list item. If I click #delete on the second or third item, nothing happens. If I click on the first item and it successfully removes the parent, I cannot do the same for the other items.

---

<li>
    <h4>Staff Meeting</h4>

    <p>

        This is a staff meeting 

    </p>

    <cite>
        <i class="fa fa-clock-o"></i> 
        1 day from now
    </cite>

    <span id="delete" data-id="1"><i class="fa fa-times"></i></span>
    <span id="edit" data-id="1"><i class="fa fa-edit"></i></span>

</li>


<li>
    <h4>Staff Meeting</h4>

    <p>

        This is another staff meeting   

    </p>

    <cite>
        <i class="fa fa-clock-o"></i> 
        16 hours ago
    </cite>

    <span id="delete" data-id="2"><i class="fa fa-times"></i></span>
    <span id="edit" data-id="2"><i class="fa fa-edit"></i></span>

</li>

The data sent to the file is data-id which represents the id of the item. On the PHP side, that's where the item with the id specified is deleted from the database. If it is deleted successfully, I return a json response of {"status": "passed"} and hide the list item on the client side showing it was successfully deleted.

EDIT

Now that the id has been changed to class , on success all items are deleted. I only need the current clicked element's parent deleted.

Answer 1

id s must be unique. The handler is (correctly) only being applied to the first id="delete" element it finds. If you want to apply the same handler to multiple delete buttons, give them a shared class and apply the handler to that:

<span class="delete" data-id="1"><i class="fa fa-times"></i></span>

$('.delete').on('click', function() {

    var $that = $(this);  

    bootbox.confirm("Are you sure you want to delete this event?", function(r) {

        // r is the result, true or false

        if(r) {

            $.post('panel', {"id": $that.data('id')}, function(data) {

                if(data.status === 'passed') {

                    $that.parent().fadeOut();

                }

            });

        }

    })

});

Answer 2

Ids are meant to be unique in a document. Try having delete be a class instead.

To refer to just the item that was clicked use $(this)

$().on('click', '.delete' function() {

  var $that = $(this);
  ...