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

Question

I am a newbie to HTML/Javascript so pardon me if the question is very simplistic. I am trying to develop a toy HTML app to maintain a todo list. I am not really stuck but would like to hear about some good design decisions for the problem below.

I have a django server which serves me a list of elements in the following form:

<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>

I also have a bit of jQuery that is called whenever one of the "[X]" links is clicked, which deletes the parent list element like this:

$(".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();
    });
});

Now, the problem is that if I change the structure of the HTML a bit, eg doing <div><a class="deletelink" href="/delete/1/">[X]</a></div> , I have to go and change the javascript as well. So, I figured out another way to do this. Now, each element has its own id as well, like:

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

Upon click, the javascript changes to

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

So this implicitly binds each deletelink_i to the todo_i list item. However this looks very hacky (eg, now if I have a list within another list, I can't easily get all the items within the first list). My question is that is there a better or easier way to do all this in javascript? If possible, I would really like to keep the HTML rendering on the server side.

Answer 1

您正在试图删除最接近li的祖先，所以你可以使用.closest（）找到所需的祖先

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

Answer 2

I'd say this is a nice example of how usefull the data attribute is.

This makes the strukture as flexible as possible, you could just do

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

And this is the 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');