使用 django 表单删除元素

Question

当旁边的一个按钮在没有 ajax 的情况下单击时，我想删除一个 <li> 行。

<form action="" method="post"> {% csrf_token %}
        <ul>
        {% for task in my_tasks %}
            <li>
                <input id="id_{{ task.todos }}" name="{{ task.todos }}" type="checkbox">
                <label for="item-1">{{ task.todos }}</label>
                <button class="delete">&#10008;</button>
            </li>
        {% endfor %}
        </ul>
        <button type="submit">Save</button>
    </form>

这是我的模板代码。当单击具有“删除”类的按钮时，我想删除标记的元素。 我能怎么做？ 谢谢

Answer 1

您可以使用 JavaScript 做到这一点。无需触摸服务器，因此无需 AJAX（除非您需要在刷新时保存状态，您的问题中没有提到）：

// Find the button elements
var buttons = document.getElementsByClassName('delete');
// Attach a click event to each
for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', deleteItem);
}
function deleteItem() {
    var li = this.parentNode;
    li.parentNode.removeChild(li);
}

一个基本的可运行示例：

var buttons = document.getElementsByClassName('delete');
for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', deleteItem);
}
function deleteItem() {
    var li = this.parentNode;
    li.parentNode.removeChild(li);
}

<ul>
    <li>
        <input id="id_1" type="checkbox">
        <label for="item-1">Something 1</label>
        <button class="delete">&#10008;</button>
    </li>
    <li>
        <input id="id_2" type="checkbox">
        <label for="item-2">Something 2</label>
        <button class="delete">&#10008;</button>
    </li>
    <li>
        <input id="id_3" type="checkbox">
        <label for="item-3">Something 3</label>
        <button class="delete">&#10008;</button>
    </li>
</ul>

Answer 2

您可以使用纯 JavaScript 来完成，这里根本不需要 AJAX。使用像 jQuery 这样的库可以极大地简化您的工作：

$("button").click(function () {
    $("button").parent().remove();
});

我没有测试它，但我认为它应该可以工作。 您将事件处理程序 (click) 分配给您的按钮元素。当一个按钮被点击时，它会选择其父级<li>，并将其移除。

编辑：

以上代码将删除所有<li> 元素。应该稍微改动一下：

$("button").click(function () {
    $(this).parent().remove();
});

编辑：

这是一个 jsfiddle：https://jsfiddle.net/532nz1o3/