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）更改为纯javascript代码，例如使用querySelector？

请注意我想使用Element.closest（），因为会有许多Div元素堆叠在一起，并且具有“parentDiv”类名。

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

那么在不使用jQuery选择器的情况下执行此操作的最佳方法是什么，例如 $（this）.closest（'。parentDiv'）。remove（）？

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

Answer 1

您还可以使用元素的parentNode属性。它将没有使用类选择器。

代码将是：

if (node.parentNode) {
  // remove a node from the tree, unless 
  // it's not in the tree already
  node.parentNode.removeChild(node);
}

Answer 2

如果按钮始终嵌套在parentDiv容器中，只需抓住父节点并使用parentNode和remove将其删除即可。

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

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

在onclick中：

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

Answer 3

这就是创建jQuery的原因。下面是等效的JavaScript，可以处理多个按钮，其中任何祖先（父母，祖父母等）都有parentDiv类

// JS equivalent to $(this).closest('.parentDiv').remove()

var buttons = document.querySelectorAll('button.close');

for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', function() {
    var parent = this.parentNode;

    while (!parent.classList.contains('parentDiv')) {
      parent = parent.parentNode;
    }

    parent.parentNode.removeChild(parent);
  });
}

<强>段：

＆＃13;

var buttons = document.querySelectorAll('button.close');

for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', function() {
    var parent = this.parentNode;

    while (!parent.classList.contains('parentDiv')) {
      parent = parent.parentNode;
    }

    parent.parentNode.removeChild(parent);
  });
}

＆＃13;

.parentDiv {
  border: 1px solid black;
}

＆＃13;

<div class="parentDiv">
  Parent 1
  <button class="close">
    Delete Parent 1
  </button>
</div>

<div class="parentDiv">
  Parent 2
  <span>
    <button class="close">
      Delete Parent 2
    </button>
  </span>
</div>

＆＃13;

Answer 4

如果由于某种原因你更改了你的HTML并且你的按钮不是你要删除的节点的直接嵌套子节点，那么你可能只需要删除jquery选择器，但需要注意一点。而不是$(this)只使用this。

Element.closest拥有不错的浏览器支持（除了Internet Explorer），如果您真的担心浏览器支持，那么还有一个polyfill。

基本上jquery的一个目的是在可能不支持它们的浏览器之间启用标准化方法，例如Element.closest。不幸的是，如果你想要完整的浏览器支持，我认为你可以使用jquery来替换你的语句。但是，您只能包含所需的部分，例如脚本标记中的Element.closest polyfill（可能位于html文档的头部）。

<script>
// Optional Element.closest polyfill
if (!Element.prototype.matches)
    Element.prototype.matches = Element.prototype.msMatchesSelector || 
                                Element.prototype.webkitMatchesSelector;

if (!Element.prototype.closest){
    Element.prototype.closest = function(s) {
        var el = this;
        if (!document.documentElement.contains(el)) return null;
        do {
            if (el.matches(s)) return el;
            el = el.parentElement || el.parentNode;
        } while (el !== null && el.nodeType === 1); 
        return null;
    };
}

</script>

<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">Remove</span>
    </button>

    <div class="alert alert-danger">{{ errorMsg }}</div>
</div>

如何使用querySelector选择此元素

4 个答案: