javascript - 为什么 Node.removeChild(Old Child) 在函数中不起作用？

Question

我有一个按钮，当我点击它时我想打印 hello 加上按钮的 innerHTML 并删除它自己:

<script type="text/javascript">
    function MyFunc(element) {
        var parentNd = element.parentElement
        parentNd.innerHTML += "<p>Hello</p>" + element.innerHTML
        parentNd.removeChild(element)
    }
</script>
<button onclick="MyFunc(this);">My Button</button>

但它只是打印文本而不删除自身为什么？

Answer 1

通过重写父级的 innerHTML，您将用副本替换按钮(因为定义按钮的 HTML 被再次解析)。因此，您对 element 的引用指向一个不再存在于 DOM 中的按钮，因此删除它没有任何效果。

我建议您停止使用 innerHTML，使用 createElement 创建 P 元素，然后调用 replaceChild 将其与按钮交换。