javascript - Removing an element using django form -

i want remove 1 <li> line when button beside clicked without ajax.

<form action="" method="post"> {% csrf_token %}         <ul>         {% 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 template code. want delete labeled element when button "delete" class clicked. how can do? thanks

you can plain javascript, ajax isn't needed @ here. using library jquery can significant ease job:

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

i didn't test it, think should work. assign event handler (click) button elements. when button clicked, selects parent, <li>, , removes it.

edit:

the above code remove <li> elements. should changed:

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

edit:

here jsfiddle: https://jsfiddle.net/532nz1o3/