创建textNode并追加后页面未显示文本？购物车空提示异常

核心问题点 #

你的代码里有三个关键错误导致空购物车提示无法正常显示：

• 减号按钮逻辑中错误调用cartItem.remove()，直接把整个购物车容器从DOM中删除，后续提示元素无法出现在原位置
• confirm返回值处理逻辑错误：用setTimeout包裹confirm后，response变量接收的是定时器ID而非confirm的弹窗结果，导致判断逻辑失效
• 减号按钮中创建的提示元素被加到了document.body，而非原购物车容器内

修正后的代码 #

JavaScript部分

const plusBtn = document.querySelector('#plus')
const minusBtn = document.querySelector('#minus')
const inputQty = document.querySelector('#inputQty')
const checkoutBtn = document.querySelector('#checkoutBtn')
const cartItem = document.querySelector('.cart')
const pTag = document.querySelector('.p-tag')
// 补全原代码遗漏的deleteBtn节点获取
const deleteBtn = document.querySelector('#deleteBtn')

minusBtn.addEventListener('click', function() {
  let qty = inputQty.value - 1

  if (inputQty.value < 2) {
    setTimeout(function() {
      // 直接用confirm的返回值做判断，无需额外变量存储
      if (confirm('Are you sure you want to remove this item from your cart?')) {
        const childDiv = document.querySelector('#request-item')
        childDiv.remove()
        checkoutBtn?.remove() // 用可选链避免元素不存在时报错

        // 清空购物车容器内容，保留容器本身
        cartItem.innerHTML = ''
        
        // 创建提示元素并插入购物车容器
        const emptyMsg = document.createElement('p')
        emptyMsg.textContent = 'Your cart is currently empty'
        emptyMsg.classList.add('empty-cart-msg')
        cartItem.appendChild(emptyMsg)
      }
    }, 0)
  } else {
    inputQty.value = qty
  }
})

deleteBtn.addEventListener('click', function() {
  if (confirm('Are you sure you want to delete this item from your cart?')) {
    const childDiv = document.querySelector('#request-item')
    childDiv.remove()
    checkoutBtn?.remove()

    // 清空容器并添加统一风格的提示
    cartItem.innerHTML = ''
    const emptyMsg = document.createElement('p')
    emptyMsg.textContent = 'Your cart is currently empty'
    emptyMsg.classList.add('empty-cart-msg')
    cartItem.appendChild(emptyMsg)
  }
})

HTML部分（无需大幅修改，确保.cart容器存在即可）

<div class='container'>
  <a class='back-link' href=" {% url 'supplyshop:catalog'  %}"> Back to Catalog</a>
  <h1 class='cart-h1'>Cart </h1>
  <div class='cart'>
    <p class='p-tag'></p>
    <div class='requests'>
      <div class='request' id='request-item'>
        <img class='request-img' src='https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png' alt='request image'>
        <div class='request-info'>
          <p class='request-name'>Anti-Bacterial Hand Gel (Gallon) </p>
          <div class='request-details'>
            <a href="" id='detailsLink'>Details</a>
            <p id='detailsText'>Coated palm Gloves used throughout the DC Large</p>
          </div>
          <p class='qty-text'>Qty</p>
          <div class='qty-container'>
            <br>
            <input type='button' value='+' class='qty qtyplus' id='plus' field='quantity' />
            <input type='text' name='quantity' value='1' class='qty' id='inputQty' />
            <input type='button' value='-' class='qty qtyminus' id='minus' field='quantity' />
            <button class='deleteBtn' id='deleteBtn' type='button'>Delete</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

额外注意事项 #

• 确保empty-cart-msg类的CSS样式生效，建议添加明显的视觉区分：

  .empty-cart-msg {
    color: #333;
    padding: 2rem;
    text-align: center;
    font-size: 1.2rem;
    background-color: #f5f5f5;
    border-radius: 4px;
  }
  

内容的提问来源于stack exchange，提问作者user21237030