动态删除datalist中的项目

时间:2018-02-12 21:18:27

标签: javascript jquery html

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

我尝试过使用.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>

谢谢你们。

4 个答案:

答案 0 :(得分:2)

您错误地使用了 remove 。只需删除正确的选项,例如:

cList.children[0].remove()

注意:

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

答案 1 :(得分:2)

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

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

答案 2 :(得分:1)

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

&#13;
&#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;
&#13;
&#13;

答案 3 :(得分:0)

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>