在select选项上使用.remove（）（不带jQuery）

Question

By mistake I used .remove() on a option element and the option was removed. That is, the option I called remove() on was removed from the select element. I can't find any documentation on this method of an option element.

Is this an undocumented method? If not, why does remove() work on the option element?

Here's a quick example. We'll create a select with 5 option s, then remove specific options by calling options[N].remove() where options is an array containing the 5 options.

 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

The ChildNode.remove() method removes the object from the tree it belongs to.

Please note, however, there is currently no Internet Explorer support for this method.

Answer 3

When there are no arguments passed to the remove function, Child node's remove function gets called and thus the node gets removed from DOM.

It is clearly documented

The HTMLSelectElement.remove() method removes the element at the specified index from the options collection for this select element.

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

ChildNode.remove , the method that gets called when remove is called without arguments on a HTMLSelectElement.

If you look close at the image, you can find the Option's Child node is a Text node and that gets removed.