javascript - 如何使用querySelector选择这个元素

Question

<div class="parentDiv" >
   <button class="close" 
    data-dismiss="modal" 
    style="..." 
    aria-label="Close" 
    onclick='$(this).closest(".parentDiv").remove()'
    >
         <span class="glyphicon glyphicon-remove-circle small"></span>
    </button>

    <div class="alert alert-danger">{{ errorMsg }}</div>
</div>
...
...

在上面的示例代码中，我可以使用什么策略将 jQuery $(this) 更改为使用 querySelector 的纯 javascript 代码？

请注意，我想使用 Element.closest()，因为会有许多 Div 元素相互堆叠，具有“parentDiv”类名。

基本上，我想选择父节点，然后在单击 $(this) 元素后删除该节点。

那么在不使用像 $(this).closest('.parentDiv').remove() 这样的 jQuery 选择器的情况下，最好的方法是什么？

是否可以在不知道当前(this)元素的类名或 ID 的情况下执行此操作？

Answer 1

如果按钮总是嵌套在 parentDiv 容器中，只需获取父节点并使用 parentNode 和 remove 将其删除。

document.querySelector("button").addEventListener("click", function() {
   this.parentNode.remove();
});

<div>
<button>remove me</button>
</div>

在一次点击中:

<div>
<button onclick="this.parentNode.remove()">remove me</button>
</div>