使用Javascript从待办事项列表中删除项目

Removing items from a to do list using Javascript

本文关键字：列表 删除项目 Javascript 使用      更新时间：2023-09-26

正在尝试我的第一个Javascript项目，使用DOM制作待办事项列表。添加项目后，我如何让"删除"按钮发挥作用，并删除项目+删除按钮。此外，在做出新条目之后，列表项在被添加之后仍然停留在输入字段中。如何在每个列表项之后将其设为空白。

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

非常感谢您的帮助。感谢

JSFiddle链接：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/

编辑Fiddle。。。试试这个

FiddleLink（现在应该工作，按钮和p-tag将被删除）

HTML

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

JS-

var row = 0;
function addText(){
    var input = document.getElementById('inputTask').value;
    if(input != "")
    {
    var node=document.createElement("p");
    var textnode=document.createTextNode(input);
    node.appendChild(textnode);
        node.setAttribute("id","contentP"+row);
    document.getElementById('addTask').appendChild(node);
    var removeTask = document.createElement('input');
    removeTask.setAttribute('type', 'button');
    removeTask.setAttribute("value", "Remove");
    removeTask.setAttribute("id", "removeButton");
    removeTask.setAttribute("onClick", "deleterow("+ row +");");
    node.appendChild(removeTask);
        row++;
    }
    else
    {
        alert("Please insert a value!");
    }
}
function deleterow(ID)
{
    document.getElementById('contentP'+ID).remove();
}

来自维也纳的问候

使用此

              // +your code 
             .....
             node.appendChild(removeTask);
                // + modify
                removeTask.onclick = function(e){
                    var dom = this;
                    var p_dom = this.parentNode;
                    console.log(p_dom);
                    var parent_node = p_dom.parentNode;
                    parent_node.removeChild(p_dom);
                }
相关文章：