Removing an element using django form

Question

I want to remove one <li> line when a button beside it clicked without ajax.

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

this is my template code. I want to delete labeled element when a button with "delete" class clicked. How can I do? Thanks

if you don't expect the page to be refreshed (or any server side event to be fired), then you have to handle the code in jaavascript. a good place to start will be http://stackoverflow.com/questions/15624690/how-do-you-remove-and-li-from-a-ul-by-id (jquery) — srj, May 08 '15 at 07:05

rnevius · Answer 1 · 2015-05-08T07:27:43.080

You can do this with JavaScript. There's no need to touch the server, so no AJAX (unless you need to save the state on refresh, which you haven't mentioned in your question):

// 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);
}

A basic runnable example:

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>

Great answer, although I'd go with jQuery for the sake of KISS. — cezar, May 08 '15 at 07:58
I do agree that jQuery is "prettier"...but vanilla JS is pretty simple...and 93kb smaller...However, as you mentioned in your other comment, jQuery *may* make sense if the OP can benefit in other areas of his/her application. — rnevius, May 08 '15 at 08:00
Just a remark: there is a new method in DOM4 ``remove()``. The body of the function ``deleteItem`` could be reduced to: ``this.parentNode.remove()``. I don't know yet if this would work with all browsers. — cezar, May 08 '15 at 08:21
Yeah, unfortunately there's no IE support for `remove()`. If the OP doesn't care about that, `remove()` is a fine option. — rnevius, May 08 '15 at 08:26

cezar · Answer 2 · 2015-05-08T07:18:37.273

1

You can do it with a plain JavaScript, AJAX isn't needed at all here. Using a library like jQuery can significant ease your job:

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

I didn't test it, but I think it should work. You assign an event handler (click) to your button elements. When a button is clicked, it selects its parent, which is <li>, and removes it.

EDIT:

The above code will remove all <li> elements. It should be slightly changed:

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

EDIT:

Here is a jsfiddle: https://jsfiddle.net/532nz1o3/

edited May 08 '15 at 07:18

answered May 08 '15 at 07:11

cezar

9,952
5
35
74

jQuery is overkill in this scenario. – rnevius May 08 '15 at 07:12
@mevius yes, you're right. However jQuery is very elegant, concise and easy maintainable. Maybe the OP is building a whole application where jQuery can come in handy. – cezar May 08 '15 at 07:21

Removing an element using django form

2 Answers2