Question

javascript - 删除元素

2013-06-08

389

javascript html

我的问题很简单，但是我不明白为什么在下面的代码中，单击按钮时只有按钮消失，而不是整个 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

Answer 1

问题是按钮元素具有 remove 属性，因此会调用该属性而不是您的 remove 函数。还有字符串。

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

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

Answer 2

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

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

element.parentNode.removeChild(element);

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')">