爲什麼按鈕消失？

當按鈕被點擊時，文本「現在我在這裏......」應該消失，而不是按鈕本身。爲什麼按鈕消失？

<div id="alpha">Now I'm here...</div> 
<button type="button" onclick="remove()">Remove</button> 
<script> 
    function remove() 
    { 
     var element = document.getElementById("alpha"); 
     element.parentNode.removeChild(element); 
    } 

    /*function add() 
    { 
     var ele = document.createElement("p"); 
     var text = document.createTextNode("This is new text"); 
     ele.appendChild(text); 

     var location = document.getElementById("alpha"); 
     location.appendChild(ele); 
    }*/ 
</script>

來源

2014-04-08 Celeritas

的可能重複[如何清除使用javascript一個div的內容？]（http://stackoverflow.com/questions/3450593/how-to-clear-the-content-of-a-div-using- javascript） –

這是一個很好的問題@Celeritas。我讓你成爲一個小提琴：http://jsfiddle.net/5x84v/ – dgp

如果你去這裏http://jsfiddle.net/5x84v/1/，似乎刪除函數根本沒有被調用。嘗試重命名爲「deleteRow」或類似的東西，看看是否有幫助 – FamiliarPie

還有一個函數叫做remove，它干擾了你的函數。

重命名功能，並能正常工作：

http://jsfiddle.net/fL3gZ/

<div id="alpha">Now I'm here...</div> 
<button type="button" onclick="Myremove()">Remove</button> 
<script> 
    function Myremove() 
    { 
     var element = document.getElementById("alpha"); 
     element.parentNode.removeChild(element); 
    } 
</script>

來源

2014-04-08 03:56:52

我以爲同樣的@Steve Wellens。如果你有第二個，你可以看看：http://jsfiddle.net/8x3A3/。我很困惑爲什麼這個解決方案不起作用。有什麼想法嗎？ – dgp

你是怎麼想到的？ – Celeritas

@dgp如果您將代碼從JavaScript部分移動到HTML部分，並將其包含在'

發生了什麼事是remove()被稱爲按鈕本身！ HTMLElement.prototype.remove是一個現有的功能（在某些瀏覽器中）！天啊！

var button = document.getElementsByTagName("button")[0]; 

// surprise! this is what's actually happening 
button.remove();

退房這種替代方法。請參閱：fiddle

更改HTML到

<div id="alpha">Now I'm here...</div> 
<button type="button">Remove</button>

然後使用這個JavaScript

function remove(id) { 
    var elem = document.getElementById(id); 
    if (elem) elem.parentNode.removeChild(elem); 
} 

var button = document.getElementsByTagName("button")[0]; 
button.addEventListener("click", function(event) { 
    remove("alpha"); 
    event.preventDefault(); 
});

這個有兩件事情：

我傾向於更unobtrusive方法
The remove功能single purpose，且可重複使用
它將工作在更多的瀏覽器
你不會碰到WTFs像你剛剛經歷

來源

2014-04-08 04:01:03 naomik

@Pilot，'HTMLElement.prototype.remove'是一個現有的函數（在某些瀏覽器中）。 – naomik

讚賞。+ 1 –

刪除（）已經是一個excisting JavaScript方法，那麼你實際上是在您的按鈕上調用該方法而不是調用該函數。

只需重命名功能，它會被罰款。

小提琴：http://jsfiddle.net/WkUqT/7/

function removeText() 
{ 
    var element = document.getElementById("alpha"); 
    element.parentNode.removeChild(element); 

}

來源

2014-04-08 04:06:46 Bigalow

您可能正在使用Chrome瀏覽器來測試代碼。鉻中的元素具有自行移除的方法，該方法將元素本身從其容器中移除。

這是最主要的原因，上面的代碼刪除，因爲這在你的onclick附加的事件，因爲調用事件的元素不存在了（）聲明沒有調用的按鈕。嘗試將您的功能的名稱更改爲removeElement()。

來源

2014-04-08 04:07:24 ryeballar

這不只是鉻。這是一個JavaScript函數。 –

我糾正了，但並不是所有瀏覽器都支持它。 – ryeballar

FWIW：https：//developer.mozilla.org/en-US/docs/Web/API/ChildNode.remove#Browser_compatibility –

相關問題

爲什麼按鈕消失？

回答

相關問題