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

问题描述

我尝试从数据列表中动态删除一个选项，但我似乎无法获得任何工作.

I am try to remove an option from a datalist dynamically but I cannot seem to get anything to work.

我尝试使用 .remove 但它没有删除特定选项，而是删除了整个数据列表.

I have tried using .remove but instead of removing a specific option it removes the entire datalist.

这是代码，

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)，你会得到这个，

If you remove the cList.remove(0), you get this,

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

谢谢各位.

推荐答案

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

You're using remove incorrectly. Simply remove the right option, like:

cList.children[0].remove()

注意:

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

Note:

• The remove method is used to remove the current element it's being run on, hence your element gets deleted.
• What we've done above is to run remove() on the second child byaccessing cList's child nodes and deleting the one at index 0.

这篇关于动态从数据列表中删除项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！