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的工作情况如何，但是没有达到那个目标。

TL; DR：我想在单个通用函数中将单击事件添加到添加到页面上的新div中。

Answer 1

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

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

＆＃34;快速而肮脏的＆＃34; 解决方案是将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

中属性名称和值之间的奇怪间距

或许＃34;更清洁＆＃34; 解决方案是使用 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，这是一个危险的属性可能会破坏引用等（通常会慢一点）

有用的链接

在Javascript中从文档中删除元素

1 个答案: