使用Javascript从待办事项列表中删除项目 [英] Removing items from a to do list using Javascript

问题描述

尝试我的第一个Javascript项目，使用DOM来制作待办事项列表。
添加项目后，如何让删除按钮运行并删除项目+删除按钮。
此外，在创建新条目后，列表项在添加后仍保留在输入字段中。如何在每个列表项后变为空白。

Attempting my first Javascript project, playing around with DOM to make a To-Do List. After adding an item, how do i get the 'Remove' button to function and remove the item + the remove button. Furthermore, after a new entry is made, the list item still stays in the input field after being added. How can it be made to be blank after each list item.

是的，我知道我的代码有点混乱，很可能是一种更简单的方法来创建它但我现在理解这样。

And yes i know my code is kinda messy and there is most likely an easier way to create it but I understand it like this for now.

非常感谢任何帮助。谢谢

Any help is greatly appreciated. Thanks

JSFiddle链接： http：// jsfiddle .net / Renay / g79ssyqv / 3 /

JSFiddle Link : http://jsfiddle.net/Renay/g79ssyqv/3/

<p id="addTask"> <b><u> Tasks </u></b> </p>
<input type='text' id='inputTask'/>
<input type='button' onclick='addText()' value='Add To List'/>


function addText(){
    var input = document.getElementById('inputTask').value;
    var node=document.createElement("p");
    var textnode=document.createTextNode(input);
    node.appendChild(textnode);
    document.getElementById('addTask').appendChild(node);

    var removeTask = document.createElement('input');
    removeTask.setAttribute('type', 'button');
    removeTask.setAttribute("value", "Remove");
    removeTask.setAttribute("id", "removeButton");
    node.appendChild(removeTask);

}

推荐答案

你可以只需分配事件：

 removeTask.addEventListener('click', function(e) {
        node.parentNode.removeChild(node);
    });

http://jsfiddle.net/g79ssyqv/6/

这篇关于使用Javascript从待办事项列表中删除项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！