这不是帮助我解决某些问题,而是解释这是什么类型问题。
我理解parentNode的作用,但我无法理解它如何与我的代码一起工作。我能够编写代码的原因是通过YouTube教程。
我正在学习如何创建一个todo列表应用程序,您可以在其中添加内容并将其删除。我做了删除按钮,但我不明白的代码是删除函数在代码中的工作原理。
根据我的理解,我认为它会从作为UL的父母那里删除作为LI的孩子?
如果有人可以解释removeItem()函数以及代码的作用,我将非常感激。
var input = document.getElementById('input'),
button = document.getElementById('add')
function removeItem() {
var item = this.parentNode
var parent = item.parentNode
parent.removeChild(item)
}
button.addEventListener('click', function(e) {
var p = document.querySelector('p')
if (input.value.trim() === '') {
p.style.display = 'block'
return false
}
p.style.display = ''
var userInput = document.createTextNode(input.value)
var li = document.createElement('li')
var ul = document.getElementById('todo')
var remove = document.createElement('button')
remove.innerHTML = 'Remove'
remove.addEventListener('click', removeItem);
ul.insertBefore(li, ul.childNodes[0])
li.appendChild(userInput)
li.appendChild(remove)
})
<input type="text" id="input"/>
<button id="add">Add</button>
<p>plz add</p>
<ul id="todo"></ul>
答案 0 :(得分:1)
你是对的。在Javascript中删除节点的最佳方法是使用removeChild()函数从其父节点中删除。
你可以使用像item.remove()这样的remove()函数,但这不适用于IE,因为在IE中这个函数做了另一件事,它从下拉列表中删除了一个选项(选择)。
因此,要实现跨浏览器行为,请使用removeChild方法。