使用纯JavaScript从DOM中删除元素

Question

使用纯JavaScript从DOM中删除元素

6

我有一个表单，想在按钮单击时删除它。

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
</head>
<body>
    <button onclick="remove()">remove</button>

    <form action="test.html" class="contactForm" dir="ltr" enctype="multipart/form-data" method="post">
        <ol>
            <li class="csc-form-9 csc-form-element csc-form-element-textline">
                <label for="field-9">Vorname</label>
                <input class="inputFormText" id="field-9" name="tx_form[firstname]" type="text"/>
            </li>
            <li class="csc-form-10 csc-form-element csc-form-element-textline">
                <label for="field-10">Nachname</label>
                <input class="inputFormText" id="field-10" name="tx_form[lastname]" type="text"/>
            </li>

        </ol>
    </form>

    <script>
    function remove()
    {
        var x = document.getElementsByClassName("contactForm");

        console.log(x);

        x.remove();
    }
    </script>

</body>
</html>

根据这篇文章，只需在DOM元素上调用remove()就能够实现删除。然而，我收到了以下错误提示：

(index):30 Uncaught TypeError: x.remove不是一个函数 at remove ((index):30) at HTMLButtonElement.onclick ((index):7)

- Black

2个回答

3

   var x = document.getElementsByClassName("contactForm")[0];

- Vladu Ionut

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pranav C Balan · Accepted Answer

getElementsByClassName 方法返回一个类似数组的元素集合，因此可以通过索引获取元素。

x[0].remove();

或者使用 querySelector 方法来获取单个元素。

var x = document.querySelector(".contactForm");