如何刪除元素父級的下一個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>