My Javascript code does not work on first click

Question

my JavaScript code for removing items from cart does not work on first click . what should I do ? where is the problem ?!

*EDITED : Thank you for the first answer . I just uploaded my HTML for you to have a look . My mother container is actually "main-cart-content-container" .

function removeCartItem() {
  for (i = 0; i < document.getElementsByClassName('main-cart-content-container').length; i++) {
    let button = document.getElementsByClassName('fa-trash')[i];
    let qty1 = document.getElementsByClassName('cart-qty')[i];
    let rmv = document.getElementsByClassName('main-cart-content-container')[i];
    button.onclick = function() {
      if (qty1.value < 2) {
        rmv.remove();
        cartNum = cartNum - 1;
        document.getElementById('counter-eclipse-num').innerText = cartNum;
      } else {
        qty1.value = qty1.value - 1;
        cartNum = cartNum - 1;
        document.getElementById('counter-eclipse-num').innerText = cartNum;
      }
    }
  }
}

<div class="polygon-cart">
  <i class="fas fa-shopping-cart" id="cart-icon"></i>
  <div class="counter-eclipse">
    <p class="counter-eclipse-num" id="counter-eclipse-num">4 </p>
  </div>
  <div class="main-cart-content-container" id="main-cart-content-container">
    <div class="cart-content-container">
      <span class="cart-price" dir="rtl">159 هزارتومان</span>
      <div class="cart-qty-container">
        <input dir="rtl" type="number" min="1" value="1" class='cart-qty' id="cart-qty" oninput="this.value = 
                    !!this.value && Math.abs(this.value) >= 0 ? Math.abs(this.value) : null">
        <label for="cart-qty" class="cart-qty-label" dir="rtl">تعداد &nbsp : &nbsp</label>
      </div>
      <a href="#" dir="rtl" class="cart-title">اکانت بازی  Battlefield V Deluxe Edition</a>
      <i class="fas fa-trash" id="trash-icon" onclick="removeCartItem()"></i>
      <div class="cart-product-img-container">
        <img src="/img/BFV.jpg" class="cart-product-img">
      </div>
    </div>
  </div>
  <div class="main-cart-content-container" id="main-cart-content-container">
    <div class="cart-content-container">
      <span class="cart-price" dir="rtl">559 هزارتومان</span>
      <div class="cart-qty-container">
        <input dir="rtl" type="number" min="1" value="3" class='cart-qty' id="cart-qty" oninput="this.value = 
                    !!this.value && Math.abs(this.value) >= 0 ? Math.abs(this.value) : null">
        <label for="cart-qty" class="cart-qty-label" dir="rtl">تعداد &nbsp : &nbsp</label>
      </div>
      <a href="#" dir="rtl" class="cart-title">اکانت بازی  Battlefield V Deluxe Edition</a>
      <i class="fas fa-trash" id="trash-icon" onclick="removeCartItem()"></i>
      <div class="cart-product-img-container">
        <img src="/img/BFV.jpg" class="cart-product-img">
      </div>
    </div>
  </div>
  <div class="cart-info-top">
    <button class="cart-checkout-btn">تسویه نهایی</button>
    <span class="cart-whole-price">جمع مبلغ سبد خرید شما : 200 هزارتومان</span>
  </div>

I made you a snippet. Please update with relevant HTML and CSS in a minimal reproducible example — mplungjan
– mplungjan, Commented Jul 14, 2021 at 7:38

mplungjan · Accepted Answer · 2021-08-15 15:55:20Z

I suggest you delegate

Native (vanilla) JS

document.querySelector(".polygon-cart").addEventListener("click", function(e) {
  const tgt = e.target; // we may need a .closest("button") here
  if (tgt.classList.contains("fa-trash")) {
    const container = tgt.closest(".main-cart-content-container");
    const qty = container.querySelector(".cart-qty").value
    if (qty < 2) {
      container.remove()
      console.log("removed since qty < 2:",qty)
    }  
  }
})

<div class="polygon-cart">
  <i class="fas fa-shopping-cart" id="cart-icon"></i>
  <div class="counter-eclipse">
    <p class="counter-eclipse-num" id="counter-eclipse-num">4 </p>
  </div>
  <div class="main-cart-content-container">
    <div class="cart-content-container">
      <span class="cart-price" dir="rtl">159 هزارتومان</span>
      <div class="cart-qty-container">
        <input dir="rtl" type="number" min="1" value="1" class='cart-qty' id="cart-qty" oninput="this.value = 
                    !!this.value && Math.abs(this.value) >= 0 ? Math.abs(this.value) : null">
        <label for="cart-qty" class="cart-qty-label" dir="rtl">تعداد &nbsp : &nbsp</label>
      </div>
      <a href="#" dir="rtl" class="cart-title">اکانت بازی  Battlefield V Deluxe Edition</a>
      <i class="fas fa-trash" id="trash-icon">TRASH</i>
      <div class="cart-product-img-container">
        <img src="/img/BFV.jpg" class="cart-product-img">
      </div>
    </div>
  </div>
  <div class="main-cart-content-container">
    <div class="cart-content-container">
      <span class="cart-price" dir="rtl">559 هزارتومان</span>
      <div class="cart-qty-container">
        <input dir="rtl" type="number" min="1" value="3" class='cart-qty' id="cart-qty" oninput="this.value = 
                    !!this.value && Math.abs(this.value) >= 0 ? Math.abs(this.value) : null">
        <label for="cart-qty" class="cart-qty-label" dir="rtl">تعداد &nbsp : &nbsp</label>
      </div>
      <a href="#" dir="rtl" class="cart-title">اکانت بازی  Battlefield V Deluxe Edition</a>
      <i class="fas fa-trash" id="trash-icon">TRASH</i>
      <div class="cart-product-img-container">
        <img src="/img/BFV.jpg" class="cart-product-img">
      </div>
    </div>
  </div>
  <div class="cart-info-top">
    <button class="cart-checkout-btn">تسویه نهایی</button>
    <span class="cart-whole-price">جمع مبلغ سبد خرید شما : 200 هزارتومان</span>
  </div>

jQuery

$(".polygon-cart").on("click", ".fa-trash", function(e) {
  const $container = $(this).closest(".main-cart-content-container");
  const qty = $container.find(".cart-qty").val();
  if (qty < 2) $container.remove()
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="polygon-cart">
  <i class="fas fa-shopping-cart" id="cart-icon"></i>
  <div class="counter-eclipse">
    <p class="counter-eclipse-num" id="counter-eclipse-num">4 </p>
  </div>
  <div class="main-cart-content-container">
    <div class="cart-content-container">
      <span class="cart-price" dir="rtl">159 هزارتومان</span>
      <div class="cart-qty-container">
        <input dir="rtl" type="number" min="1" value="1" class='cart-qty' id="cart-qty" oninput="this.value = 
                    !!this.value && Math.abs(this.value) >= 0 ? Math.abs(this.value) : null">
        <label for="cart-qty" class="cart-qty-label" dir="rtl">تعداد &nbsp : &nbsp</label>
      </div>
      <a href="#" dir="rtl" class="cart-title">اکانت بازی  Battlefield V Deluxe Edition</a>
      <i class="fas fa-trash" id="trash-icon">TRASH</i>
      <div class="cart-product-img-container">
        <img src="/img/BFV.jpg" class="cart-product-img">
      </div>
    </div>
  </div>
  <div class="main-cart-content-container">
    <div class="cart-content-container">
      <span class="cart-price" dir="rtl">559 هزارتومان</span>
      <div class="cart-qty-container">
        <input dir="rtl" type="number" min="1" value="3" class='cart-qty' id="cart-qty" oninput="this.value = 
                    !!this.value && Math.abs(this.value) >= 0 ? Math.abs(this.value) : null">
        <label for="cart-qty" class="cart-qty-label" dir="rtl">تعداد &nbsp : &nbsp</label>
      </div>
      <a href="#" dir="rtl" class="cart-title">اکانت بازی  Battlefield V Deluxe Edition</a>
      <i class="fas fa-trash" id="trash-icon">TRASH</i>
      <div class="cart-product-img-container">
        <img src="/img/BFV.jpg" class="cart-product-img">
      </div>
    </div>
  </div>
  <div class="cart-info-top">
    <button class="cart-checkout-btn">تسویه نهایی</button>
    <span class="cart-whole-price">جمع مبلغ سبد خرید شما : 200 هزارتومان</span>
  </div>

Thank you I tried this and it did not work as It should . Or maybe I don't know where to put this in my code ?
My God . You are a life Saver ! thank you for your good knowledge !! I think I should start learning JQuery as javascript alone is not responsive enough !
Well. The code I posted is not jQuery. It is vanilla JavaScript, i.e. native

Collectives™ on Stack Overflow

My Javascript code does not work on first click

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related