尝试我的第一个Javascript项目,使用DOM来制作待办事项列表。 添加项目后,如何让“删除”按钮运行并删除项目+删除按钮。 此外,在创建新条目后,列表项在添加后仍保留在输入字段中。如何在每个列表项后变为空白。
是的,我知道我的代码有点混乱,很可能是一种更简单的方法来创建它,但我现在理解这样。
非常感谢任何帮助。感谢
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);
}
答案 0 :(得分:1)
您可以简单地指定事件:
removeTask.addEventListener('click', function(e) {
node.parentNode.removeChild(node);
});
答案 1 :(得分:0)
编辑小提琴...试试这个
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();
}
来自维也纳的问候
答案 2 :(得分:0)
使用此
// +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);
}