如何用纯javascript编写jquery的parent().parent().parent()

Question

如何将这段jquery代码重写成纯javascript代码？

    $(this).parent().parent().parent().remove();

我这样做了：

this.parentNode.removeChild(this); // not working.

我的html代码在我的javascript中

div.innerHTML =
'<img src="img.png">
<div class="first">
   <div class="second">
      <a href="#">click me to remove img </a>
   </div>
</div>'

Answer 1

看起来您正在尝试删除当前元素。您可以使用remove方法来执行此操作

​

document.getElementById('world').parentNode.parentNode.remove()

<div>
  <p>
    <span id="hello">Hello</span>
    <span id="world">World</span>
  </p>
</div>
<div>
  <p>
    <span id="brass">Brass</span>
    <span id="monkey">Monkey</span>
  </p>
</div>
<div>
  <p>
    <span id="im">I'm</span>
    <span id="batman">Batman</span>
  </p>
</div>

​

您可以做的另一件事是使用closest，而不是使用parentNode一千次

​

document.getElementById('world').closest('.group').remove()

<div class="group">
  <p>
    <span id="hello">Hello</span>
    <span id="world">World</span>
  </p>
</div>
<div class="group">
  <p>
    <span id="brass">Brass</span>
    <span id="monkey">Monkey</span>
  </p>
</div>
<div class="group">
  <p>
    <span id="im">I'm</span>
    <span id="batman">Batman</span>
  </p>
</div>

​