添加到購物車按鈕功能

Question

我有產品和購物車。 每個產品都有一個“添加到購物車”按鈕，當您單擊它時，它會將產品添加到購物車，並且按鈕的內部文本將是“在購物車中”，並且該按鈕將被禁用。 我的問題是，從購物車中刪除產品或清除產品后，我無法弄清楚如何啟用按鈕並將內部文本更改回“添加到購物車”。

這是添加產品的 JS：

let addBtns = document.getElementsByClassName("bag-btn");
for (let i = 0; i < addBtns.length; i++) {
  const btn = addBtns[i];
  btn.addEventListener("click", addToCart);
}

function addToCart(e) {
  const button = e.target;
  button.innerText = "In Cart";
  button.disabled = true;
  const title = button.parentElement.nextElementSibling.textContent;
  const price =
    button.parentElement.nextElementSibling.nextElementSibling.children[0]
      .textContent;
  const img = button.parentElement.children[0].src;
  addItemToCart(title, price, img);
}

function addItemToCart(title, price, img) {
  const newRow = document.createElement("div");
  newRow.classList.add("cart-item");
  newRow.innerHTML = `
  <img src="${img}" alt="product" srcset="" />
  <div>
  <h4>${title}</h4>
  <h5>${price}</h5>
  <span class="remove-item">Remove</span>
  </div>
  <div>
  <i class="fas fa-chevron-up"></i>
  <p class="item-amount">1</p>
  <i class="fas fa-chevron-down"></i>
  </div>`;
  cartContent.append(newRow);
}

這是刪除產品 function：

cartContent.addEventListener("click", (e) => {
  if (e.target.classList.contains("remove-item")) {
    let removeItem = e.target;
    cartContent.removeChild(removeItem.parentElement.parentElement);

那么，從購物車中刪除產品后，如何將按鈕文本和功能恢復正常？ 任何幫助，將不勝感激。

Answer 1

為什么您不為添加執行與刪除相同的委托？

我沒有你的 HTML，但是像這樣

cartContent.addEventListener("click", (e) => {
  const tgt = e.target;
  if (tgt.classList.contains("remove-item")) {
     tgt.closest("whatever container").remove();
     tgt.closest("whatever container has button").querySelector(".bag-btn").textContent="Add to cart";
  }
  else if (e.target.classList.contains("bag-btn")) addToCart(tgt)
 })

並且有

function addToCart(button) {
  // const button = e.target;

所有這些parentElement.nextElementSibling.nextElementSibling.children[0]都是可怕的

而是使用button.closest("whatever container").querySelector("some selector")