stop bubbling event onclick

Question

I have the following

<p>haha</p>
<button class="btn btn-light" onclick="nextSibling.classList.toggle('d-none');">
  <i class="fa fa-ellipsis-h"></i>
</button>
<div class="prev-content d-none">
  <p>second reply from second account</p>
  <br>
  <button class="btn btn-light" onclick="nextSibling.classList.toggle('d-none');">
    <i class="fa fa-ellipsis-h"></i>
  </button>
  <div class="prev-content d-none">
    <p>reply from system</p>
  </div>
</div>

I want to show only next sibling <div class="prev-content"> by click on button, but there is some strange behavior. It shows all divs or it hides all divs. I think the reason in bubbling events.

How can I resolve that?

Answer 1

• Don't use inline JS same as you don't use inline style attributes
• Use addEventListener
• Use Event.currentTarget inside the function handler to refer to the event delegated Element
• Use nextElementSibling
• Use finally classList.toggle to toggle a specific class

const toggleNext = (ev) => {
  const EL = ev.currentTarget;
  const EL_next = EL.nextElementSibling;
  EL_next.classList.toggle("u-none");
};
const ELs_tog = document.querySelectorAll("[data-toggle-next]");
ELs_tog.forEach(EL => EL.addEventListener("click", toggleNext));

.u-none {display: none;}

<button type="button" data-toggle-next>TOGGLE</button>
<div class="u-none">
  <p>second reply from second account</p>
  <button type="button" data-toggle-next>TOGGLE</button>
  <div class="u-none">
    <p>reply from system</p>
  </div>
</div>

Additional read:

• Node.nodeType