仅选择目标项并将其删除-清除innerHtml

我目前正在构建和发票创建者应用程序，以练习javascript。

我的目标是，当用户按下“删除”按钮时，只有单击的项目才会从列表中删除。

HTML格式

<div class="outer-container">
      <header>
        <h1>Invoice creator</h1>
        <p>Thanks for choosing RazCorp, LLC!</p>
      </header>

      <main class="inner-container">
        <section class="form-enter">
          <form id="the-form">
            <input
              type="text"
              id="task-input"
              name="task-input"
              placeholder="Enter task"
              required
            />
            <div class="amount-container">
              <label for="amount">$</label>
              <select name="amount" id="amount">
                <option value="10">10</option>
                <option value="20">20</option>
                <option value="30">30</option>
                <option value="40">40</option>
                <option value="50">50</option>
              </select>
            </div>
            <button id="submit-btn" class="submit" type="submit">+</button>
          </form>
        </section>

        <section class="display">
          <div class="task-total">
            <h3>TASK</h3>
            <h3>TOTAL</h3>
          </div>
          <div class="render"></div>
        </section>

        <section class="final-amount">
          <div class="final-left">
            <h3>NOTES</h3>
            <p>We accept cash, credit card, or PayPal</p>
          </div>
          <div class="final-right">
            <h3>TOTAL AMOUNT</h3>
            <h1 id="total-sum"></h1>
          </div>
        </section>
        <button id="send-invoice" class="send-invoice">
          <span><i class="fa-solid fa-envelope"></i></span>Send invoice
        </button>
      </main>
    </div>

Javascript代码

const theForm = document.getElementById('the-form');
const taskInput = document.getElementById('task-input');
const renderItem = document.querySelector('.render');
const selectOption = document.getElementById('amount');
const totalSum = document.getElementById('total-sum');

let totalAmount = 0;

theForm.addEventListener('submit', function (e) {
  e.preventDefault();
  totalAmount += parseInt(selectOption.value);
  renderItem.innerHTML += `
  <div class="render-item">
    <div class="left-side">
        <h2>${taskInput.value}</h2>
        <button class='remove'>Remove</button>
    </div>
    <h2><span>$</span>${selectOption.value}</h2>
  </div>
  `;

  totalSum.textContent = `$${totalAmount}`;

  taskInput.value = '';
  selectOption.value = '10';

  const removeItem = document.querySelectorAll('.render-item');

  removeItem.forEach((item) => {
    item.addEventListener('click', function () {
      renderItem.innerHTML = '';
      totalAmount = 0;
      totalSum.textContent = '';
    });
  });
});

首先我通过javascript创建Html，然后我想删除它。

现在，当我按下移除键时，每个新创建的redenerItem都会被删除，而不仅仅是被单击的redenerItem。

感谢任何帮助：）