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>

这是我的模板代码。我想在带有＆＃34;删除＆＃34;的按钮时删除带标签的元素。上课了。我能怎么做？感谢

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/

使用django表单

2 个答案: