I want to delete multipale button on click onebyone not delete it all by one click

Question

I manage to delete button with <li> element class li_listItem". But my aim is to on click delete <button> itself and also <li> element with it. For now I can only delete both elements only by clicking on it. Can you help me with it?

var ul = document.querySelector('#shopping_list__items');

function DeleteButtonOnclick(e) {
  const trgt = e.target.closest('.deleteBtn, .li_listItem');
  if (trgt) trgt.remove();
}

ul.addEventListener("click", DeleteButtonOnclick);

<ul id="shopping_list__items">
  <div class="flex">
    <li class="li_listItem" random="23">Notebook</li>
    <button class="deleteBtn">Delete Button</button>
  </div>

  <div class="flex">
    <li class="li_listItem">Jello</li>
    <button class="deleteBtn">Delete Button</button>
  </div>

  <div class="flex">
    <li class="li_listItem">Spinach</li>
    <button class="deleteBtn">Delete Button</button>
  </div>

  <div class="flex">
    <li class="li_listItem">Rice</li>
    <button class="deleteBtn">Delete Button</button>
  </div>

  <div class="flex">
    <li class="li_listItem">Birthday Cake</li>
    <button class="deleteBtn">Delete Button</button>
  </div>

  <div class="flex">
    <li class="li_listItem">Candles</li>
    <button class="deleteBtn">Delete Button</button>
  </div>
</ul>

Answer 1

I used this.parentNode.remove() method to delete both the <li> element and the <button> element inside the when the element with the deleteBtn class style is applied is clicked.

var elements = document.getElementsByClassName("deleteBtn");

var removeSelectedElement = function() {
    this.parentNode.remove();
};

for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', removeSelectedElement, false);
}

<ul id="shopping_list__items">
  <div class="flex">
    <li class="li_listItem" random="23">Notebook</li>
    <button class="deleteBtn">Delete Button</button>
  </div>

  <div class="flex">
    <li class="li_listItem">Jello</li>
    <button class="deleteBtn">Delete Button</button>
  </div>

  <div class="flex">
    <li class="li_listItem">Spinach</li>
    <button class="deleteBtn">Delete Button</button>
  </div>

  <div class="flex">
    <li class="li_listItem">Rice</li>
    <button class="deleteBtn">Delete Button</button>
  </div>

  <div class="flex">
    <li class="li_listItem">Birthday Cake</li>
    <button class="deleteBtn">Delete Button</button>
  </div>

  <div class="flex">
    <li class="li_listItem">Candles</li>
    <button class="deleteBtn">Delete Button</button>
  </div>
</ul>