Javascript 删除已单击元素的父级

当文件的ajax返回true时，我试图“隐藏”一个元素。当我点击

#delete

的id时，一个ajax请求被发送到一个文件，该文件处理返回通过或失败的数据。如果文件返回'passed'，那么我想隐藏父文件以显示它已被'deleted'

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

这就是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

，则什么也不会发生。如果单击第一个项目并成功删除父项，则无法对其他项目执行相同操作。

---

工作人员会议

这是员工会议

1天后


工作人员会议

这是另一次员工会议

16小时前

发送到文件的数据是

数据id

，它表示项目的id。在PHP端，从数据库中删除具有指定id的项。如果它被成功删除，我将返回一个json响应

{“status”：“passed”}

，并隐藏客户端上显示它被成功删除的列表项

编辑

---

现在，

id

已更改为

class

，成功后，所有项目都将被删除。我只需要删除当前单击元素的父元素。

ID在文档中是唯一的。尝试将delete改为类

要仅引用已单击的项目，请使用$（此）

---

ID在文档中是唯一的。尝试将delete改为类

要仅引用已单击的项目，请使用$（此）

---

ID在文档中是唯一的。尝试将delete改为类

要仅引用已单击的项目，请使用$（此）

---

ID在文档中是唯一的。尝试将delete改为类

要仅引用已单击的项目，请使用$（此）

---

id

s必须是唯一的。处理程序（正确）仅应用于它找到的第一个

id=“delete”

元素。如果要将同一处理程序应用于多个删除按钮，请为它们提供一个共享类并将该处理程序应用于该按钮：

$（'.delete'）。在（'click'，function（）上{
var$that=$（this）；
bootbox.confirm（“您确定要删除此事件吗？”，函数（r）{
//r是结果，对还是错
if（r）{
$.post（'panel'，{“id”）：$that.data（'id'）}，函数（data）{
如果（data.status==‘已通过’）{
$that.parent（）.fadeOut（）；
}
});
}
})
});

id

s必须是唯一的。处理程序（正确）仅应用于它找到的第一个

id=“delete”

元素。如果要将同一处理程序应用于多个删除按钮，请为它们提供一个共享类并将该处理程序应用于该按钮：

$（'.delete'）。在（'click'，function（）上{
var$that=$（this）；
bootbox.confirm（“您确定要删除此事件吗？”，函数（r）{
//r是结果，对还是错
if（r）{
$.post（'panel'，{“id”）：$that.data（'id'）}，函数（data）{
如果（data.status==‘已通过’）{
$that.parent（）.fadeOut（）；
}
});
}
})
});

id

s必须是唯一的。处理程序（正确）仅应用于它找到的第一个

id=“delete”

元素。如果要将同一处理程序应用于多个删除按钮，请为它们提供一个共享类并将该处理程序应用于该按钮：

$（'.delete'）。在（'click'，function（）上{
var$that=$（this）；
bootbox.confirm（“您确定要删除此事件吗？”，函数（r）{
//r是结果，对还是错
if（r）{
$.post（'panel'，{“id”）：$that.data（'id'）}，函数（data）{
如果（data.status==‘已通过’）{
$that.parent（）.fadeOut（）；
}
});
}
})
});

id

s必须是唯一的。处理程序（正确）仅应用于它找到的第一个

id=“delete”

元素。如果要将同一处理程序应用于多个删除按钮，请为它们提供一个共享类并将该处理程序应用于该按钮：

$（'.delete'）。在（'click'，function（）上{
var$that=$（this）；
bootbox.confirm（“您确定要删除此事件吗？”，函数（r）{
//r是结果，对还是错
if（r）{
$.post（'panel'，{“id”）：$that.data（'id'）}，函数（data）{
如果（data.status==‘已通过’）{
$that.parent（）.fadeOut（）；
}
});
}
})
});

id

s必须是唯一的。处理程序（正确）仅应用于它找到的第一个

id=“delete”

元素。如果您想将同一个处理程序应用于多个删除按钮，请给它们一个共享类并将该处理程序应用于该按钮。因此，我只需将

id

更改为'class'？。。。您的选择器设置为

$（'.delete'）

新问题，但现在它隐藏了所有项，您正在选择所有这些按钮。您需要

var$that=$（this）

仅获取单击的一个。

id

s必须是唯一的。处理程序（正确）仅应用于它找到的第一个

id=“delete”

元素。如果你想申请sa

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

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

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