JavaScript - 移除元素

Question

我的问题很基础，但我不明白为什么在以下代码中，单击按钮时只有按钮消失了，而不是整个div消失了：

<script>
    function remove(id) {
        //get the element node
        element = document.getElementById(id);

        //remove the element from the document
        document.removeChild(element);
    }
</script>

<div id="intro" class="jumbotron">
    <h1>Your Offline Web Dictionary!</h1>
    <p class="lead">

    <div class="controls">
        <input class="span7 " type="text" placeholder=" " name="key">
    </div>
    <div>
        <button class="btn btn-large btn-success" onclick="remove(intro)">
            Dictionary Search
        </button>
    </div>
</div>

JSFiddle

- JosephConrad

Answer 1

问题在于button元素有一个remove属性，它会覆盖你的remove函数。另外还有字符串问题。

<button class="btn btn-large btn-success" onclick="window.remove('intro');console.log(this.remove);">
    Search
</button>

http://jsfiddle.net/HMEVd/76/

- Musa

---

+1 是的，这是一个非常好的解释。非常感谢！！我会在几分钟内接受它。 - JosephConrad

为什么点击按钮会调用 remove 函数？是否在动作中隐含了 with 函数？还有，这个 remove 函数从哪里来的？它不是指定的 DOM 方法。 - T.J. Crowder

我之前看到过这种行为，但从未真正质疑过它。 - Musa

这似乎是正确的（在控制台中查看）：http://jsfiddle.net/HMEVd/78/ - T.J. Crowder

又是一个例子，说明使用DOM0处理程序是一个糟糕的想法。 （而在onclick生成的函数中隐式使用元素的with正在回来困扰我...） - T.J. Crowder

Answer 2

有两个问题。首先，intro 应该是一个字符串，而不是一个标识符，在您的onclick中使用 remove('intro')。

其次，document.rwmoveChild 是不正确的。应该在要移除元素的父级上调用 removeChild。通常使用以下方法：

element.parentNode.removeChild(element);

- Niet the Dark Absol

---

所有的都是正确的，但它并没有回答OP提出的问题：为什么按钮而不是div消失了？ - T.J. Crowder

Answer 3

intro 应该作为字符串而不是变量传递给函数，例如 'intro'

另外，您必须重命名您的函数，例如，使用 removeById 替代 remove。这样它就可以完美地工作了。

函数 remove 实际上执行完全不同的操作。（当命名为 remove 时，甚至不会调用您的函数，您可以通过在其中放置一个警报消息来查看。）

function removeById(id) {
        //get the element node
        element = document.getElementById(id);

        //remove the element from the document
        document.removeChild(element);
}

...
<button class="btn btn-large btn-success" onclick="removeById('intro')">

- Joseph Myers

---

这并没有解释 OP 引用的症状："仅在按钮单击时，按钮消失，而不是整个 div"。 - T.J. Crowder