如何删除元素父级的下一个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内，我实际上有几个“手风琴”类的按钮，然后是“ panel”类的div，单击“是”图标后，我想为每个按钮删除每个div。

我要执行的操作是使用“是”功能删除“面板”类的下一个div。

yesicon.closest（'button'）似乎工作正常，但是当我想删除nextSibling时，它似乎无法工作。

Answer 1

您的HTML无效，这就是问题的原因。

抛开了首先在<button>内不允许使用<div>的问题……

该按钮的内容为：

• 开始div
• img
• 结束div
• img
• 结束div

由于没有用于关闭第二个结束标签的打开div，因此错误恢复将隐式关闭按钮，然后div结束标签关闭doors_list元素。

因此：您要定位的元素不是按钮的同级，而是按钮的父级。

使用验证器 。 编写有效的HTML。

Answer 2

您想使用nextElementSibling ，正如其名称所暗示的那样，它将是下一个兄弟元素。 nextSibling将是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> 

Answer 3

您忘记在图标前打开div

</div>
 <img src="Iconos/yes.png" onclick="yes(event,this);" alt="Yes" class="yes_icon">
</div>