我是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呈现保留在服务器端。
答案 0 :(得分:5)
您正试图删除最近的li
祖先,以便您可以使用.closest()找到所需的祖先
var parentItem = $(this).closest('li');
答案 1 :(得分:1)
我说这是数据属性有用的一个很好的例子。
这使得结构尽可能灵活,你可以做到
<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();
});
});
答案 2 :(得分:0)
parent()
接受选择器,因此您只需选择仅查看li
个元素的父级:
var parentItem = $(this).parents('li');