javascript - 如何删除元素父元素的下一个 div？

Question

function yes(event, yesicon) {

  event.stopPropagation();
  yesicon.closest('button').nextSibling.remove(); //Why doesn't this work???
  yesicon.closest('button').remove(); //This works ok

}

<div class="doors_list" id="doors_list">
  <button class="accordion">             
                  <div>
                    <img src="Iconos/arrow_down.png" alt="Expand" class="arrow_icon">
                  </div>
                  <div>
                    <img src="Iconos/yes.png" onclick="yes(event,this);" alt="Yes" class="yes_icon">
                  </div>  
                  <div>
                    <p class="door_room">Kitchen</p>
                  </div>              
              </button>
  <div class="panel"> --THIS IS THE ONE I WANT TO DELETE --
    <p>Info on Door 1</p>
  </div>
</div>

在doors_list内部，我实际上有几个“accordion”类的按钮，后面是“panel”类的div，当单击“yes”图标时，我想为每个按钮删除一个按钮。

我想要做的是使用“yes”函数删除“panel”类的下一个 div。

yesicon.closest('button') 似乎工作正常，但当我想删除 nextSibling 时，它似乎不起作用。

Answer 1

您想要使用 nextElementSibling，因为顾名思义，它将成为下一个同级元素。 nextSibling 将是后面的任何节点，在您的情况下将是一个文本节点:元素之间的空白字符。

function yes(event, yesicon) {
  event.stopPropagation();
  yesicon.closest('button').nextElementSibling.remove();
}

<div class="doors_list" id="doors_list">
  <button class="accordion">
    <div>
      <img src="Iconos/arrow_down.png" alt="Expand" class="arrow_icon" />
    </div>
    <div>
      <img src="Iconos/yes.png" onclick="yes(event,this);" alt="Yes" class="yes_icon" />
    </div>
    <div>
      <p class="door_room">Kitchen</p>
    </div>
  </button>
  <div class="panel">
    --THIS IS THE ONE I WANT TO DELETE --
    <p>Info on Door 1</p>
  </div>
</div>