为什么Node.removeChild(Old Child）没有't在函数中工作

Why Node.removeChild(Old Child) doesn't works in functions?

本文关键字：函数 工作 没有 removeChild Node Old Child 为什么      更新时间：2024-04-14

我有一个按钮，当我点击它时，我想打印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>

但它只是打印文本，不会自行删除为什么？

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

我建议您停止使用innerHTML，用createElement创建p元素，然后调用replaceChild用按钮交换它。

这很好！

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

使用jquery

<button id="x" onclick="MyFunc(this);">My Button</button>
function MyFunc(element) {
        var parentNd = element.parentElement
        parentNd.innerHTML += "<p>Hello</p>" + element.innerHTML
         $("#x").remove();
    }

演示

或者使用下面的代码，它也将工作

function MyFunc(element) {
    var parentNd = element.parentElement
    document.write(element.innerHTML);
   parentNd.removeChild(element);
}

注意：我不喜欢这种方法，我认为最好的想法是在onclick事件

中隐藏按钮
相关文章：