使用带有ajax的jQuery来定位应用于多个元素的类的单个实例

Question

我有一个HTML表格，其中每一行都包含有关用户先前保存的书签的信息。当用户单击第一个表格单元格中的span时，我使用jQuery来确认操作，更改span的样式，然后通过ajax在服务器上执行删除查询。一切都按预期工作 - 仅针对被点击的跨度 - 除了ajax部分。我只想删除当前行，但是编写代码的方式是删除每一行。

HTML看起来像这样：

<table>
    <tr>
        <td>                            
            <div class="entry-bookmark">
            <span class="bookmark-icon entry enabled" data="8"></span>
            </div>
        </td>
        <td>
            <a href="/title1/">Title 1</a>
        </td>
    </tr>
    <tr>
        <td>                            
            <div class="entry-bookmark">
            <span class="bookmark-icon entry enabled" data="9"></span>
            </div>
        </td>
        <td>
            <a href="/title2/">Title 2</a>
        </td>
    </tr>                   
</table>

jQuery就像这样：

$(document).on("click", ".bookmark-icon.entry.enabled", function(){
    event.preventDefault();
    var r = confirm("Are you sure you want to delete this bookmark?");
    if (r == false) {
        return false;
    }
    $(this).removeClass("enabled");
    $(this).addClass("disabled");
    $(this).hide();
    $(this).fadeIn(1500);
    var entryID = $(this).attr("data");
    var bookmarkData = {
        entryID: entryID,
        value: 0
    };
    $.ajax({
        url: '/bookmark/',
        type: 'post',
        data: bookmarkData
    });
});