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将其与按钮交换。

Answer 2

使用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();
    }

<强> DEMO

或使用下面的代码它也可以使用

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

注意：我不喜欢这种方法，我认为最好的办法是隐藏onclick事件中的按钮

Answer 3

这太棒了！

<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>

为什么Node.removeChild（Old Child）在函数中不起作用？

3 个答案: