为什么按钮消失了？

Question

文本“现在我在这里...”应该在单击按钮时消失，而不是按钮本身。

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

Answer 1

还有另一个名为 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>

Answer 2

正在发生的事情是按钮本身正在调用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 方法
• remove 函数是 single purpose，可重复使用
• 它将在更多浏览器中运行
• 您不会像刚刚经历的那样遇到 WTF

Answer 3

remove() 已经是一个现有的 javascript 方法，因此您实际上是在按钮上调用该方法而不是调用函数。

只要重命名函数就可以了。

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

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

} 

Answer 4

您可能正在使用 chrome 作为浏览器来测试该代码。 chrome 中的元素有一个自删除，.remove() 方法，该方法将元素本身从其容器中删除。

这是上面代码删除按钮的主要原因，因为调用事件的元素不再存在，因此未调用 onclick() 声明中的附加事件。尝试将函数名称更改为 removeElement()。