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

Question

我错误地在.remove()元素上使用了option，并移除了option。也就是说，option我调用的remove()已从select元素中删除。我找不到有关option元素的此方法的任何文档。

这是一种无证方法吗？如果没有，为什么remove()会对option元素起作用？

这是一个简单的例子。我们将创建一个select，其中包含5个option，然后通过调用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

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

  

ChildNode.remove（）方法从它所属的树中删除对象。

但请注意，此方法目前没有Internet Explorer支持。

Answer 2

DOM也是-方法。

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节点，并且会被删除。