element.remove() parece extraño.
<!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>cuando hago clic en el botón, los doms no se eliminan en absoluto , y luego volví a hacer clic en el botón, solo el div contiene el número aleatorio restante , estoy realmente confundido por qué es eso.
childNodes devuelve una colección en vivo. Las colecciones en vivo pueden ser poco intuitivas para trabajar, porque pueden mutar mientras las iteras y desorientarte. Aquí, está .remove() ing un nodo de texto, y luego el <div>Random Num</div> se convierte instantáneamente en el índice 0 en la colección. Luego pasa al primer índice de la colección, que es otro nodo de texto. El proceso se repite varias veces, eliminando todos los nodos de texto, pero sin eliminar ningún elemento.
Convierta los childNodes en una matriz primero, de modo que la colección no cambie mientras itera sobre ella.
[...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> O, un enfoque más fácil sería simplemente establecer el .innerHTML del padre en la cadena vacía.
this.parent.innerHTML = '';