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 方法用于删除正在运行的当前元素，因此您的元素会被删除。
我们上面做的是在第二个孩子身上运行 remove() 访问 cList 的子节点并删除索引 0 的节点。

Answer 2

如果您拥有该选项，则可以直接删除该选项。但是，您不能拥有纯数字ID。将您的选项ID重命名为“option1”，您可以使用以下内容。

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

Answer 3

您还可以使用这样的简单jQuery语法：

＆＃13;

$("#Options option").eq(0).remove();

/* Or
$("#Options option:first-child").remove();
$("#Options option:nth-child(1)").remove();
$("#Options option").remove('#O1');
*/

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<datalist id = "Options">
    <option id = "O1" value = "tut"> Test </option>
    <option id = "O2" value = "tut2"> Test2 </option>
</datalist>
</form>

＆＃13;

Answer 4

document.querySelector()不是jQuery方法，因此remove()也不是。使用jQuery，您可以简单地empty it：

console.log("Before: ", $("#form1").html());
$("#Options").empty();
console.log("After: ", $("#form1").html());

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form1">
  <datalist id="Options">
      <option id="O1" value="tut">Test</option>
      <option id="O2" value="tut2">Test2</option>
  </datalist>
</form>

动态删除datalist中的项目

4 个答案:

注意：