javascript element.remove() 不删除 dom
[英]javascript element.remove() not remove dom
问题描述
element.remove() seem to weird. 
element.remove() 似乎很奇怪。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <div id="root"></div> </body> <script> class View { constructor() { this.parent = document.querySelector('#root') } template() { return ` <div>Random Num</div> <div>${Math.random()}</div> <button type='button'>Reset Random Num</button> ` } render() { const templateElement = document.createElement('template') templateElement.innerHTML = this.template() templateElement.content .querySelector('button') .addEventListener('click', () => { this.rerender() }) this.parent.append(templateElement.content) } rerender() { this.parent.childNodes.forEach((item) => { // here is the problem item.remove() }) // const templateElement = document.createElement('template') // templateElement.innerHTML = this.template() // this.parent.append(templateElement.content) } } const viewIns = new View() viewIns.render() </script> </html>
when I click the button, doms don't get removed at all ,and then I clicked the button again , only the div contains the random number left ,I'm really confused why is that.当我单击按钮时， doms 根本没有被删除，然后我再次单击按钮，只有 div 包含剩下的随机数，我真的很困惑为什么会这样。
1 个解决方案
解决方案1
4 已采纳 2022-06-03 01:58:01
childNodes returns a live collection. childNodes返回一个实时集合。 Live collections can be unintuitive to work with, because they can mutate themselves while you're iterating over them and throw you off.使用实时集合可能不直观，因为它们可能会在您迭代它们时自行变异并让您失望。 Here, you're .remove() ing a text node, and then the <div>Random Num</div> instantly becomes the 0th index in the collection.在这里，你.remove()是一个文本节点，然后<div>Random Num</div>立即成为集合中的第 0 个索引。 Then you move on to the 1st index in the collection, which is another text node.然后转到集合中的第一个索引，这是另一个文本节点。 The process repeats a few times, removing all text nodes, but not removing any elements.该过程重复几次，删除所有文本节点，但不删除任何元素。
Turn the childNodes into an array first, so that the collection won't change while you're iterating over it.首先将 childNodes 转换为数组，以便在您迭代它时集合不会改变。
[...this.parent.childNodes].forEach((item) => {
class View { constructor() { this.parent = document.querySelector('#root') } template() { return ` <div>Random Num</div> <div>${Math.random()}</div> <button type='button'>Reset Random Num</button> ` } render() { const templateElement = document.createElement('template') templateElement.innerHTML = this.template() templateElement.content .querySelector('button') .addEventListener('click', () => { this.rerender() }) this.parent.append(templateElement.content) } rerender() { [...this.parent.childNodes].forEach((item) => { item.remove() }) // const templateElement = document.createElement('template') // templateElement.innerHTML = this.template() // this.parent.append(templateElement.content) } } const viewIns = new View() viewIns.render()
<div id="root"></div>
Or, an easier approach would be to just set the .innerHTML of the parent to the empty string.或者，更简单的方法是将父级的.innerHTML设置为空字符串。
this.parent.innerHTML = '';
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.