javascript - 使用时间比较从选择字段中删除选项

Question

我正在尝试根据时间比较从选择字段中删除时间选项，但出于某种原因，仅删除所有其他选项。 17:00:00 之后的一切都是正确的。

我错过了什么？

我的时间选项:

<select id="mytimes">        
    <option value="14:00:00">2:00 PM</option>
    <option value="14:15:00">2:15 PM</option>
    <option value="14:30:00">2:30 PM</option>
    <option value="14:45:00">2:45 PM</option>
    <option value="15:00:00">3:00 PM</option>
    <option value="15:15:00">3:15 PM</option>
    <option value="15:30:00">3:30 PM</option>
    <option value="15:45:00">3:45 PM</option>
    <option value="16:00:00">4:00 PM</option>
    <option value="16:15:00">4:15 PM</option>
    <option value="16:30:00">4:30 PM</option>
    <option value="16:45:00">4:45 PM</option>
    <option value="17:00:00">5:00 PM</option>
    <option value="17:15:00">5:15 PM</option>
    <option value="17:30:00">5:30 PM</option>
    <option value="17:45:00">5:45 PM</option>
    <option value="18:00:00">6:00 PM</option>
    <option value="18:15:00">6:15 PM</option>
    <option value="18:30:00">6:30 PM</option>
    <option value="18:45:00">6:45 PM</option>
    <option value="19:00:00">7:00 PM</option>
    <option value="19:15:00">7:15 PM</option>
    <option value="19:30:00">7:30 PM</option>
    <option value="19:45:00">7:45 PM</option>
    <option value="20:00:00">8:00 PM</option>
  </select>

我的 Javascript:

var t = document.getElementById('mytimes');
var t2 = "17:00:00";
for (var i = 0; i < t.length; i++) {
  if (t[i].value < t2) {
    t[i].remove();
  }
}

我的结果

<option value="14:15:00">2:15 PM</option>
<option value="14:45:00">2:45 PM</option>
<option value="15:15:00">3:15 PM</option>
<option value="15:45:00">3:45 PM</option>
<option value="16:15:00">4:15 PM</option>
<option value="16:45:00">4:45 PM</option>
<option value="17:00:00">5:00 PM</option>
<option value="17:15:00">5:15 PM</option>
<option value="17:30:00">5:30 PM</option>
<option value="17:45:00">5:45 PM</option>
<option value="18:00:00">6:00 PM</option>
<option value="18:15:00">6:15 PM</option>
<option value="18:30:00">6:30 PM</option>
<option value="18:45:00">6:45 PM</option>
<option value="19:00:00">7:00 PM</option>
<option value="19:15:00">7:15 PM</option>
<option value="19:30:00">7:30 PM</option>
<option value="19:45:00">7:45 PM</option>
<option value="20:00:00">8:00 PM</option>

Answer 1

您可以使用 .childNodes 来选择 option .childNodes of #mytimes, .parentElement 选择 select 元素，.removeChild() 移除 option 元素，其中 value 小于17:00:00

<select id="mytimes">
  <option value="14:00:00">2:00 PM</option>
  <option value="14:15:00">2:15 PM</option>
  <option value="14:30:00">2:30 PM</option>
  <option value="14:45:00">2:45 PM</option>
  <option value="15:00:00">3:00 PM</option>
  <option value="15:15:00">3:15 PM</option>
  <option value="15:30:00">3:30 PM</option>
  <option value="15:45:00">3:45 PM</option>
  <option value="16:00:00">4:00 PM</option>
  <option value="16:15:00">4:15 PM</option>
  <option value="16:30:00">4:30 PM</option>
  <option value="16:45:00">4:45 PM</option>
  <option value="17:00:00">5:00 PM</option>
  <option value="17:15:00">5:15 PM</option>
  <option value="17:30:00">5:30 PM</option>
  <option value="17:45:00">5:45 PM</option>
  <option value="18:00:00">6:00 PM</option>
  <option value="18:15:00">6:15 PM</option>
  <option value="18:30:00">6:30 PM</option>
  <option value="18:45:00">6:45 PM</option>
  <option value="19:00:00">7:00 PM</option>
  <option value="19:15:00">7:15 PM</option>
  <option value="19:30:00">7:30 PM</option>
  <option value="19:45:00">7:45 PM</option>
  <option value="20:00:00">8:00 PM</option>
</select>
<script>
  var t = document.getElementById("mytimes").childNodes;
  var t2 = "17:00:00";
  for (var i = 0; i < t.length; i++) {        
    if (t[i].tagName === "OPTION" && t[i].value < t2) {
      t[i].parentElement.removeChild(t[i]);
    }
  }
</script>