動態從數據列表中刪除項目

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

您使用的刪除不正確。 只需刪除正確的選項，例如：

cList.children[0].remove()

注意：

• remove方法用於刪除它正在運行的當前元素，因此您的元素被刪除。
• 我們上面所做的是通過訪問cList的子節點並刪除索引0處的子節點，在第二個子節點上運行remove() 。

Answer 2

如果你有它的 id，你可以直接刪除一個選項。 但是，您不能擁有純數字 ID。 將您的選項 ID 重命名為“option1”之類的名稱，您可以使用以下內容。

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

Answer 3

您還可以使用簡單的 jQuery 語法，如下所示：

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

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

Answer 4

document.querySelector()不是 jQuery 方法，因此remove()也不是。 使用 jQuery，您可以簡單地清空它：

 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>