Question

我目前正在通过制作简单的待办事项列表来学习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

Answer 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>";

<强> Your fiddle, updated.

注意：我还添加了cursor: pointer CSS，因此x对用户有所帮助。

Answer 2

由于您正在学习JavaScript，并查看您的代码和接受的答案，因此您应该注意以下三点：

<强> A 即可。请勿使用innerHTML添加单个 DOM元素。

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

意思是，对于第10个li，您要添加10个项目。对于第11个li，您要删除10个，然后添加11个项目，而不是1.它对DOM性能不利，并且再次添加所有li没有意义每插入li个。

innerHTML适用于一次性操作。

<强>乙即可。永远不要使用内联JavaScript！

它有很多原因。此外，社区中的其他开发者也讨厌它。在查看使用它的问题时，它们会逃跑。

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

这是坏，坏，非常糟糕！

<强> C 即可。使用活动委派！

请看this answer。

简而言之，不是每个li都有多个点击功能，最好在ul上设置一个功能。如果您点击li，也会点击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仅适用于现代浏览器。检查此answer是否有跨浏览器的内容总而言之，这对你以前的小代码来说似乎是一个开销，但这是一个很好的做法，可以拯救世界和JavaScript。
虽然您已接受答案，但我已使用上述代码更新了fiddle

删除Javascript生成的HTML

2 个答案: