根据选择删除 div - Javascript

在网页开发中，有时我们需要动态地根据用户的选择来删除特定的 <div> 元素。Javascript 提供了一种简单而有效的方法来实现这个功能。

以下是一个示例代码片段，该代码片段会根据用户选择的 checkbox 来删除相应的 <div>：

// HTML:
<div>
  <input type="checkbox" id="checkbox1" name="checkbox1">
  <label for="checkbox1">删除第一个 div</label>
</div>

<div>
  <input type="checkbox" id="checkbox2" name="checkbox2">
  <label for="checkbox2">删除第二个 div</label>
</div>

<div>
  <input type="checkbox" id="checkbox3" name="checkbox3">
  <label for="checkbox3">删除第三个 div</label>
</div>

<!-- Javascript -->
<script>
  // 获取所有的复选框元素
  const checkboxes = document.querySelectorAll('input[type="checkbox"]');

  // 监听复选框的变化事件
  checkboxes.forEach((checkbox) => {
    checkbox.addEventListener('change', () => {
      // 获取与复选框关联的 div 元素
      const divToBeDeleted = checkbox.parentNode;

      // 根据复选框的选中状态来删除或还原相应的 div 元素
      if (checkbox.checked) {
        divToBeDeleted.remove();
      } else {
        document.body.appendChild(divToBeDeleted);
      }
    });
  });
</script>

以上代码中，我们首先通过 document.querySelectorAll 方法获取所有的复选框元素，并使用 forEach 循环遍历它们。然后，我们使用 addEventListener 方法为每个复选框添加一个变化事件监听器。当复选框的选中状态发生变化时，事件监听器会将与复选框关联的 <div> 元素删除或还原。

请注意，以上示例仅为演示目的。实际应用中，你可以根据自己的需求修改代码，添加更多的 <div> 元素和相关操作。

希望以上信息能对你有所帮助！