选中指定id的select选项时，如何删除页面中的div块（非隐藏）

嘿，我来帮你搞定这个需求！首先得提个小提醒：HTML规范里要求同一个页面的元素id必须唯一，你当前代码里<option>和<div>都用了remove作为id，虽然浏览器不会直接报错，但这会给后续元素选择带来混淆，建议之后调整成不同的id（比如把option的id改成mercedes-option，div的id保留remove-div），这样代码更健壮。不过先基于你提供的原始代码给出实现方法：

原生JavaScript实现 #

我们需要监听下拉框的change事件，当选中目标选项时，找到对应的div并彻底移除它（不是隐藏，移除后元素会从DOM树中完全消失）：

<select id="car-select">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option id="remove" value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<div id="remove">如何删除这个div？</div>

<script>
// 获取下拉框元素
const selectBox = document.getElementById('car-select');
// 监听下拉框选中状态变化
selectBox.addEventListener('change', function() {
  // 获取当前选中的选项
  const selectedOpt = this.options[this.selectedIndex];
  // 判断选中的是不是id为remove的Mercedes选项
  if (selectedOpt.id === 'remove') {
    // 因为id重复，用querySelector精准定位到div元素
    const targetDiv = document.querySelector('div#remove');
    // 彻底删除元素：调用remove()方法
    if (targetDiv) {
      targetDiv.remove();
    }
  }
});
</script>

关键细节说明 #

• element.remove()是原生JS中彻底删除DOM元素的方法，和style.display = 'none'（仅隐藏元素）完全不同，执行后元素不再存在于页面结构中。
• 因为你的HTML存在id重复问题，所以用document.querySelector('div#remove')来指定选择div标签，避免和option元素混淆。如果之后修正了id唯一性问题，直接用document.getElementById('你的div唯一id')会更高效。
• 监听change事件是因为只有当下拉框选中状态改变时，我们才需要触发删除操作，符合需求逻辑。

优化后的规范代码（推荐） #

为了避免id重复的潜在问题，调整后的代码会更符合HTML规范：

<select id="car-select">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option id="mercedes-option" value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<div id="remove-div">如何删除这个div？</div>

<script>
const selectBox = document.getElementById('car-select');
selectBox.addEventListener('change', function() {
  const selectedOpt = this.options[this.selectedIndex];
  if (selectedOpt.id === 'mercedes-option') {
    const targetDiv = document.getElementById('remove-div');
    if (targetDiv) {
      targetDiv.remove();
    }
  }
});
</script>

这样代码逻辑更清晰，也不会出现元素选择混淆的问题。

内容的提问来源于stack exchange，提问作者user8918745