Javascript jQuery AJAX按钮单击-在AJAX调用成功后删除表行

我正在显示一个HTML表，并希望在最后一列中包含一个按钮，单击该按钮时，将执行一个AJAX调用，这将导致从表中删除表行。我对jQuery和AJAX还不熟悉，并且在工作中不断解决问题——我已经设法设置了一些在编辑字段时运行的AJAX调用，但现在我很难将其附加到表行中的按钮上

下面是表格的外观：

<tr class="" id="tableRow1"><td><a href="projectDetails.php?action=viewProject&id=DA0993D3-F559-4ADB-BD3A-33EA6A812FE9">Store 1</a></td><td>lorem ipsum</td><td>John Smith</td><td>20/11/2014 12:53:52 AM</td><td><button type="button" id="closeNote" class="btn btn-primary">Acknowledge</button></td></tr>
 <tr class="" id="tableRow2"><td><a href="projectDetails.php?action=viewProject&id=BA10F0A9-1778-4606-90D3-318E75070B2C">Store 2</a></td><td>lorem ipsum</td><td>Sally Jones</td><td>20/11/2014 12:53:52 AM</td><td><button type="button" id="closeNote" class="btn btn-primary">Acknowledge</button></td></tr>
 <tr class="" id="tableRow3"><td><a href="projectDetails.php?action=viewProject&id=058EC9C0-E913-44A8-8BD6-8AB9B8EA3CDF">Store 3</a></td><td>lorem ipsum </td><td>Bill Howden</td><td>12/11/2014 01:43:03 PM</td><td><button type="button" id="closeNote" class="btn btn-primary">Acknowledge</button></td></tr>

我知道按钮的ID不是唯一的-目前脚本仅在单击第一行中的按钮时启动。我不知道如何为脚本可以看到的每个按钮分配唯一的ID

这是我的剧本：

 <script type="text/javascript">
 $(document).ready(function() {
    $("#closeNote").click(function(){
        $.post('editNote.php', { type: 'hideNote', id: '1E1DDA14-D2C6-4FC8-BA5F-DBCCC7ABAF7F' }, function(data) {
            data = JSON.parse(data);
            if (data.error) {
                $("#ajaxAlert").addClass("alert alert-danger").html(data.text);
                $("#ajaxAlert").show();
                return; // stop executing this function any further
            } else { 
                $("#ajaxAlert").hide();
                $(this).closest('tr').remove();
            }

        }).fail(function (xhr) {
            // no data available in this context
            $("#ajaxAlert").addClass("alert alert-danger");
            //display AJAX error details
            $("#ajaxAlert").html(xhr.responseText);
            $("#ajaxAlert").show();
        });
     }); 
});
</script>

---

我只需要一些帮助来实现这一点，这样当按钮在任何一行上单击时，它就会调用脚本，而如果它随后调用的PHP脚本成功，它就会删除单击按钮的行。

而不是将按钮应用于ID，为每个链接提供一个类：

<button class="btn btn-primary close-note"

在回调函数中，关键字this不再指元素，而是指XHR对象

要解决此问题，请将$this分配给$.post之外的变量

您还需要确保浏览器不会跟随链接；再次修改单击行：

.click(function(e){
    e.preventDefault();

---

我需要在用户单击表最后一列中的按钮时运行脚本，而不是在用户单击表第一列中的链接时运行脚本。确定；所需要做的就是在我的答案中用按钮替换，我现在已经完成了。这是在选择器中尽可能使用显式元素的另一个原因，它可以帮助其他人，包括未来的你！阅读代码。感谢您迄今为止的帮助-按钮已经有一个类，我需要从btn btn primary的引导框架中保留该类。如果我将脚本更改为$button.btn btn-primary.clickfunction{当我单击按钮时，什么都没有发生。有什么想法吗？选择器不是这样工作的。空格将表示您正在寻找后代。您可以执行$button.btn.btn-primary或$.btn或$.btn primary或$.btn.btn-primary或$button.btn-primary或$.btn primary.btn`或几乎任何不包含空格的组合：Y您还应该添加此类；btn和btn主类最终可能会在代码中的其他地方使用，您不希望此单击事件绑定到每个按钮。我在回答中修改了代码，以显示您可以保留当前类。上面的用户正确地将多个类添加到您使用的链接选择器中。字符，但最好使用此选择器的特定类。

var $self = $(this);
$.post( ... ... function(response){
    // code and stuff
    $self.closest('tr').hide();
});

.click(function(e){
    e.preventDefault();