如何在无目标id或class时用JavaScript删除包裹元素

你需要删除的是span的父级div元素，之前的代码错误在于没有正确定位到这个div，以下是可行的实现方式：

原生JavaScript实现 #

利用DOM元素的parentNode或parentElement属性获取父级div，再执行删除操作：

<div>
  Choice 1 <span onclick="remove(this)">close X</span>
</div>
<script>
function remove(val) {
  // 获取当前span的父级div并删除
  val.parentNode.remove();
  // 也可以用 val.parentElement.remove(); 效果一致
}
</script>

为什么之前的代码无效？ #

• val.remove()：仅删除触发事件的span元素本身，不是目标div
• val.previousElementSibling.remove()：Choice 1是文本节点（不是元素节点），previousElementSibling只会查找同级元素节点，所以找不到有效目标
• $(this).prev().remove()：一方面函数内的this并未指向jQuery对象，另一方面prev()同样只查找同级元素节点，无法定位到文本节点后的父div，且本身逻辑错误（应该找父元素而非前一个节点）

jQuery实现 #

如果使用jQuery，需要将传入的DOM元素转为jQuery对象，再通过parent()获取父级div：

<div>
  Choice 1 <span onclick="remove(this)">close X</span>
</div>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
function remove(val) {
  $(val).parent().remove();
}
</script>

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