Question

文字＆＃34;现在我在这里......＆＃34;单击按钮时应该会消失，而不是按钮本身。

<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

还有一个叫做删除的功能会干扰你的功能。

重命名您的功能，它可以正常工作：

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()。

为什么按钮消失了？

4 个答案: