javascript - 从数据列表中动态删除项目

Question

我尝试动态地从数据列表中删除一个选项，但我似乎无法使任何东西起作用。

我试过使用 .remove 但不是删除特定选项，而是删除整个数据列表。

这是代码，

var cList = document.querySelector("#Options");
    cList.remove(0);

这是数据列表，

<datalist id="Options">
        <option id="O1" value="tut">Test</option>
        <option id="O2" value="tut2">Test2</option>
</datalist>

这是代码运行的结果，

<form id="form1"> </form>

如果你删除 cList.remove(0)，你会得到这个，

<form id="form1">
<datalist id="Options">
    <option id="O1" value="tut">Test</option>
    <option id="O2" value="tut2">Test2</option>
</datalist>
</form>

谢谢你们。

Answer 1

您正在使用 remove 错误。只需删除正确的选项，例如:

cList.children[0].remove()

备注:

• remove 方法用于删除正在运行的当前元素，因此您的元素将被删除。
• 我们上面所做的是在第二个 child 上运行 remove() 访问 cList 的子节点并删除索引 0 的子节点。