Question

＆＃13;

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

＆＃13;

<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>

＆＃13;

Inside doors_list我实际上有几个班级＆＃39;手风琴＆＃39;其次是班级小组＆＃39;当“是”＆＃39;是我要为每个人删除的那个。单击图标。

我想要做的是删除班级的下一个div＆＃39; panel＆＃39;与＆＃34;是＆＃34;功能

yesicon.closest（＆＃39;按钮＆＃39;）似乎工作正常，但是当我想删除nextSibling时，它似乎无法正常工作。

Answer 1

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

暂且不考虑<div>首先不允许<button>的问题......

按钮的内容是：

开始div
IMG
结束div
IMG
结束div

由于第二个结束标记没有打开div关闭，错误恢复会隐式关闭按钮，然后div结束标记会关闭doors_list元素。

因此：你所瞄准的元素不是按钮的兄弟，而是它的父母。

使用a validator。写有效的HTML。

Answer 2

您希望使用nextElementSibling，正如其名称所暗示的那样，是下一个兄弟元素。 nextSibling将是随后的节点，在您的情况下将是一个文本节点：元素之间的空格字符。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

您忘记在图标

之前打开div

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

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

3 个答案: