如何在javascript中将相关的HTML元素绑定在一起？

Question

我是HTML/Javascript的新手,如果问题非常简单,请原谅我.我正在尝试开发一个玩具HTML应用程序来维护待办事项列表.我并没有真正陷入困境,但我想听听下面问题的一些好的设计决定.

我有一个django服务器,它为我提供了以下形式的元素列表:

<ul>
    <li  id="todo_1">Get groceries <a class="deletelink" href="/delete/1/">[X]</a></li>
    <li  id="todo_2">Water plants <a class="deletelink" href="/delete/2/">[X]</a></li>
    <li  id="todo_3">Repair bike <a class="deletelink" href="/delete/3/">[X]</a></li>
</ul>

每当点击一个"[X]"链接时,我也会调用一些jQuery,它会删除父列表元素,如下所示:

$(".deletelink").on("click", function (event) {
    event.preventDefault();
    var parentItem = $(this).parent(); // the problem is here
    $.ajax({ 
    ... // ajax post request to server here
    }).success( function (status, data) {
        parentItem.delete();
    });
});

现在,问题是,如果我稍微改变HTML的结构,例如<div><a class="deletelink" href="/delete/1/">[X]</a></div>,我必须去改变javascript.所以,我想出了另一种方法.现在,每个元素都有自己的id,如:

    <li  id="todo_1">Get groceries <a class="deletelink" id="deletelink_1" href="/delete/1/">[X]</a></li>

点击后,javascript会变为

var parentItem = $("#todo_" + (/\D+_(\d+)/.exec(this.id)[1]));

所以这隐含地将每个绑定deletelink_i到todo_i列表项.然而,这看起来非常h​​acky(例如,现在如果我在另一个列表中有一个列表,我不能轻易获得第一个列表中的所有项目).我的问题是,有没有更好或更简单的方法在javascript中完成所有这些？如果可能的话,我真的想在服务器端保留HTML呈现.

Answer 1

您正在尝试删除最近的li祖先,以便您可以使用.closest()来查找所需的祖先

var parentItem = $(this).closest('li');