解释parentNode

时间:2017-11-23 21:39:06

标签: javascript

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

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

1 个答案:

答案 0 :(得分:1)

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

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

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