解释parentNode

Question

这不是帮助我解决某些问题，而是解释这是什么类型问题。

我理解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>

Answer 1

你是对的。在Javascript中删除节点的最佳方法是使用removeChild（）函数从其父节点中删除。

你可以使用像item.remove（）这样的remove（）函数，但这不适用于IE，因为在IE中这个函数做了另一件事，它从下拉列表中删除了一个选项（选择）。

因此，要实现跨浏览器行为，请使用removeChild方法。