我的 Javascript 代码在第一次点击时不起作用

Question

我的 JavaScript 用于从购物车中删除商品的代码在第一次点击时不起作用。我应该怎么办？问题出在哪里？！

*编辑：感谢您的第一个回答。我刚刚上传了我的 HTML 给你看看。我的母容器实际上是“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>

Answer 1

我建议你委派

原生（香草）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>

我的 Javascript 代码在第一次点击时不起作用

My Javascript code does not work on first click

javascript

onclick