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>

我还有一些jQuery，只要其中一个＆＃34; [X]＆＃34;单击链接，这将删除父列表元素，如下所示：

$(".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列表项。然而，这看起来非常hacky（例如，现在如果我在另一个列表中有一个列表，我就不能轻易获得第一个列表中的所有项目）。我的问题是，有没有更好或更简单的方法在javascript中完成所有这些？如果可能的话，我真的希望将HTML呈现保留在服务器端。

Answer 1

您正试图删除最近的li祖先，以便您可以使用.closest()找到所需的祖先

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

Answer 2

我说这是数据属性有用的一个很好的例子。

这使得结构尽可能灵活，你可以做到

<li  id="todo_1" data-item-id="1">
    Get groceries 
    <a class="deletelink" data-item-id="1" href="#">
        [X]
    </a>
</li>

这是jQuery Part

$(".deletelink").on("click", function (event) {
    event.preventDefault();
    var selectedItem = $(this).attr('data-item-id')
    $.ajax({ 
    ... // ajax post request to server here
    }).success( function (status, data) {
        $('[data-item-id="'+selectedItem+'"]').remove();
    });
});

Answer 3

parent()接受选择器，因此您只需选择仅查看li个元素的父级：

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

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

3 个答案: