使用附加事件处理程序删除DOM元素的正确方法是什么？

Question

让我们假设我的HTML是这样的：

<tr id="myRow">
 <td > some text</td>
 <td > some text</td>
...
</tr>

并且每个TD 都已将处理程序附加到onClick事件。

我想以正确的方式删除#myRow儿童。 下面的代码会导致内存泄漏吗？

query('#myRow').innerHtml = '';

删除所有子TD元素的正确方法是什么 - 不会导致内存泄漏？

我在这里看到类似的问题Does remove a DOM object (in Javascript) will cause Memory leak if it has event attached?，但我不清楚删除元素是否会清除事件处理程序。

Answer 1

通常，现代浏览器会尝试确保在删除或替换DOM元素时没有内存泄漏。因此，您应该能够设置innerHtml或调用element.children.clear()，而无需担心导致内存泄漏的事件处理程序。

但有一件事是：您通常希望避免添加对多个子元素执行相同操作的事件处理程序的情况。将事件处理程序附加到父级，然后使用target和currentTarget属性来区分附加处理程序的元素和触发事件处理程序的元素通常更有效。

Answer 2

您可以删除所有这样的元素：

query("#myRow").children.clear();

我认为这也会照顾删除处理程序等。文档中没有关于内存问题的具体内容：https://www.dartlang.org/docs/tutorials/remove-elements/