Question

我有一个表单并尝试在按钮点击时将其删除。

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

根据this article，只需在DOM元素上调用remove()即可。但是，我得到了：

（index）：30 Uncaught TypeError：x.remove不是函数在删除（（索引）：30）在HTMLButtonElement.onclick（（index）：7）

Answer 1

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

x[0].remove();

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

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

Answer 2

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

使用vanilla javascript从DOM中删除元素

2 个答案: