在select選項上使用.remove（）（不帶jQuery）

Question

錯誤地，我在option元素上使用了.remove() ，並刪除了該option 。 也就是說，我從select元素中remove()了我調用remove()的option 。 我找不到任何關於這個option元素方法的文檔。

這是一種無證的方法嗎？ 如果沒有，為什么remove()處理option元素？

這是一個簡單的例子。 我們將創建一個帶有5個option的select ，然后通過調用options[N].remove()刪除特定選項，其中options是包含5個選項的數組。

 const selectEl = document.querySelector('select') const optionEls = Array.from(selectEl.querySelectorAll('option')) optionEls[1].remove() optionEls[2].remove() optionEls[3].remove() 

 <select> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> <option>Option 4</option> <option>Option 5</option> <select> 

Answer 1

.remove()也是一種DOM方法。

Answer 2

https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove

ChildNode.remove（）方法從它所屬的樹中刪除對象。

但請注意，此方法目前沒有Internet Explorer支持。

Answer 3

當沒有參數傳遞給remove函數時，會調用Child節點的remove函數，從而從DOM中刪除該節點。

它清楚地記錄在案

HTMLSelectElement.remove（）方法從select元素的options集合中刪除指定索引處的元素。

https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/remove

ChildNode.remove ，在HTMLSelectElement上調用remove而不帶參數時調用的方法。

如果仔細觀察圖像，可以發現Option的Child節點是Text節點，並且會被刪除。