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

user_17193197 0
Viewed 60

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>

addeventlistener click html javascript
2 Answers

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>

user_150326880

Based on your html structure the simplest way is to delete the parent of the button. (I hope I didn't misunderstand what you want to do.)

$(".deleteBtn").click(function(){
        $(this).parent().remove();
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<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>

user_109541670
Related