爲什麼Node.removeChild（Old Child）在函數中不起作用？

Question

我有一個按鈕，當我點擊它，我想打印招呼加按鈕的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

這是okey！

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