如何获取和删除querySelectorAll的parentNode

Question

我正在尝试定位父节点，它是我的代码中链接标签 (a) 的一个 div，我已经尝试过，target.parentNode但这不起作用，也许是因为我正在使用 querySelectorAll?。到目前为止我的代码是：

  function remove() {
    var target = document.querySelectorAll('a[data-type="data"]'), i;
     for (i = 0; i < target.length; i++) {
       if (target.length > 1) {
        target[i].remove();
       }
     }
  }
  remove();

网址：

<div class="carousel-slide">
   <a data-type="data" data-type="image">
   <img class="img-responsive" src="./285-603.jpg">
   </a>
</div>

有任何想法吗？

Answer 1

当你这样做时有一个问题，你querySelectorAll不需要定义i

querySelectorAll将获取全部a[data-type="data"]，该函数将从 DOM 中的节点中删除

编辑：要删除父级，只需parentNode.remove()使用 forEach 函数来获取所有a标签并删除其父级。

运行下面的代码片段。

function remove() {
  var target = document.querySelectorAll('a[data-type="data"]');
  target.forEach(function(anchors) {
    anchors.parentNode.remove();
    console.log('a tag with [data-type="data"] = Deleted')
  })
}
remove();

<div class="carousel-slide">
   <a data-type="data" data-type="image">
   <img class="img-responsive" draggable="false">
   Will be deleted
   </a>
</div>

<div class="carousel-slide">
   <a data-type="no" data-type="image">
   <img class="img-responsive" draggable="false">
   Will stay
   </a>
</div>