javascript - 使用 Javascript 从文档中删除元素

Question

致力于构建这个待办事项列表应用程序以更好地学习 JS。

我可以将文本插入框中，并让它向页面添加一个新的 div 元素，并在 div 中包含相关文本。将 div 添加到页面的代码会自动应用类 .newItem然后添加一个递增的 id i0 , i1 , i2等每次点击时。一切正常，没有问题。现在，我一直在摆弄代码，以便能够单击单个 div 元素并将其从页面中删除，但似乎无法让它工作。

var iDN = 0;
//Function that adds a new div with a custom incrementing id number
document.getElementById('add_button').onclick = function () {
    var taskName = document.getElementById('add_task').value; // Store the value in the textbox into a variable
    document.querySelector('.shit_to_do').innerHTML += '<div class = "newItem" id = "i' + iDN + '"' + 'onclick = removeEl()' + '>' + taskName + '</div>';
    iDN += 1;
};

document.getElementById('testing').onclick = function () {
    var parentNode = document.querySelector('.shit_to_do');
    parentNode.removeChild(parentNode.children[0]);
}

function removeEl() {
    for (i = 0; i < iDN; i++) {
        if (document.getElementById('i' + i).onclick) {
            document.getElementById('i' + i).display.style = 'none';
        }
        alert(i);
    }
}

for 循环实际上是一些随机选项，我试图弄清楚每个 div 的 onclick 是如何工作的，但没有深入研究。

tl；博士: 我想通过单个通用函数将点击事件添加到添加到页面上的新 div。

Answer 1

如果您尚未为此属性/属性设置处理程序，则 document.getElementById('i' + i).onclick 的值将为 null，否则它将是一个函数。 null 始终为 falsy，函数 始终为 truthy。

要删除元素，您必须查看 this或e.target其中e是点击事件，然后调用DOM方法node.removeChild(child)。

<小时/>

“快速而肮脏”的解决方案是将 this 传递给 removeEl 并以这种方式将其删除，

// ...
    document.querySelector('.shit_to_do').innerHTML += '<div class="newItem" id="i' + iDN + '" onclick="removeEl(this)">' + taskName + '</div>';
// ...
function removeEl(elm) {
    elm.parentNode.removeChild(elm);
}

我还删除了 HTML 中属性名称和值之间的奇怪空格

<小时/>

一个也许“更干净”的解决方案是使用DOM方法创建节点并附加监听器

function createDiv(index, taskname) {
    var d = document.createElement('div');
    d.setAttribute('id', 'i' + index);
    d.textContent = taskname;
    return d;
}

function removeElm() {
    this.parentNode.removeChild(this);
}

var iDN = 0;
document.getElementById('add_button').addEventListener('click', function () {
    var taskName = document.getElementById('add_task').value,
        list = querySelector('.shit_to_do'),
        div = createDiv(iDN, taskName);
    div.addEventListener('click', removeElm);
    list.appendChild(div);
    iDN += 1;
});

这种方式意味着浏览器不会重新解析任何HTML，因为它不使用 element.innerHTML ，这是一个危险的属性，可能会破坏引用等(通常会慢一些)

<小时/>

有用的链接

• node.addEventListener
• document.createElement
• node.appendChild