1

我目前正在通过制作一个简单的待办事项列表来学习 Javascript。我想知道如何在 Javascript 生成 HTML 内容后删除它。如果用户按下标签'x'之间的<span>，它将删除该项目：

    var doc = document;

    function addText(){

    var input = doc.getElementById('input').value;
    doc.getElementById('do').innerHTML += "<li>" + input + " <span> x </span>" + "</li>";

  }

HTML：

<form>
<input type='text' id='input' />
<input type='button' onclick='addText()' value='Add' />
</form>

<ul id="do"> </ul>

JSFIDDLE

4

2 回答 2

1

利用：

onclick='this.parentNode.parentNode.removeChild(this.parentNode)'

如：

doc.getElementById('do').innerHTML += "<li>" + input + " <span onclick='this.parentNode.parentNode.removeChild(this.parentNode)' > x </span>" + "</li>";

你的小提琴，更新了。

注意：我还添加了cursor: pointerCSS，因此x对用户来说有些意义。

于 2013-06-16T21:18:59.467 回答
1

由于您正在学习 JavaScript，并查看您的代码和接受的答案，您应该注意以下 3 件事：

一个。不要innerHTML用于添加单个DOM 元素。

在您的代码中，您正在执行 a ....innerHTML += ...，这意味着innerHTML每次都会重新标记并插入完整内容。

意思是，对于 10th li，您要添加 10 个项目。对于 11th li，您要删除 10 然后添加 11 个项目，而不是 1。这对性能不利，并且每次插入时都再次DOM添加所有 s 是没有意义的。lili

innerHTML适合一次性操作。

乙。永远不要使用内联 JavaScript！

它有很多原因。此外，社区中的其他开发人员也讨厌它。看着一个使用它的问题，他们会逃跑。

<span onclick='this.parentNode.parentNode.removeChild(this.parentNode)' >

这很糟糕，很糟糕，非常糟糕！

C. _ 使用事件委托！

看看这个答案。

简而言之，li与其为每个 设置多个点击功能，不如在 上设置一个功能ul。如果您单击 anli您也单击ul。可以检查哪个li被单击，ul然后将其删除，如下所示：

HTML：

<form>
    <input type='text' id='input' />
    <input type='button' id='add-btn' value='Add' />
</form>
<ul id="do"> </ul>

JavaScript：

var doc = document,
    parentUL = document.getElementById('do'),
    addBtn = document.getElementById('add-btn');

addBtn.addEventListener('click', function() {    
    var input = doc.getElementById('input').value,
        li = doc.createElement('li');

    // use innerHTML only to set the conetnt of single DOM item
    li.innerHTML = input + '<span style="cursor: pointer; color: red; margin-left: 20px" > x </span>';

    // append only once on every create
    parentUL.appendChild(li);
});

// delegate UL's click to li, by checking target item
parentUL.addEventListener('click', function(evt) {
    // check the real target
    var target = evt.target,
        liNode = target.parentNode;
    parentUL.removeChild(liNode);
});

注意：addEventListener仅适用于现代浏览器。检查这个答案是否有跨浏览器的东西。
总的来说，所有这些对于您以前的小代码来说似乎是一种开销，但这是一个可以拯救世界和 JavaScript 的好习惯。
虽然您已经接受了答案，但我已经用上面的代码更新了小提琴

于 2013-06-17T11:48:48.527 回答