javascript - 删除被单击元素的父元素

Question

当文件的 ajax 返回 true 时，我试图“隐藏”一个元素。当我点击#delete的id时，一个ajax请求被发送到一个处理数据的文件，该文件将返回通过或失败的数据。如果文件返回“已通过”，那么我想隐藏父文件以显示它已“已删除”。

它是动态显示的项目列表。每个项目都有一个“x”，单击该“x”时，系统会提示用户点击确认或取消以从列表中删除该项目。当用户点击确认时，将调用一个 ajax 请求到一个文件，该文件将发送字符串“passed”或“failed”。

这是 javascript 端发生的事情:

$('#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();

                }

            });

        }

    })

});

<小时/>

所有这些都有效，但仅适用于第一个列表项。如果我在第二个或第三个项目上单击#delete，则不会发生任何情况。如果我单击第一个项目并成功删除父项目，则我无法对其他项目执行相同的操作。

<小时/>

<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>

发送到文件的数据是data-id，它表示项目的ID。在 PHP 方面，这是从数据库中删除具有指定 id 的项目的地方。如果删除成功，我会返回 {"status": "passed"} 的 json 响应，并隐藏客户端的列表项，显示它已成功删除。

编辑

现在 id 已更改为 class，成功后所有项目都会被删除。我只需要删除当前单击元素的父元素。

Answer 1

id 必须是唯一的。该处理程序(正确地)仅应用于它找到的第一个 id="delete" 元素。如果您想将相同的处理程序应用于多个删除按钮，请为它们提供一个共享类并将处理程序应用于该类:

<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();

                }

            });

        }

    })

});