Select only targeted item and remove it – clear innerHtml

I am currently building and invoice creator app as to practice javascript.

My goal is that when the user presses the "remove" button, only the clicked item will be removed from the list.

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 = '';
    });
  });
});
<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>

First I am creating the Html through javascript and then I would like to remove it.

Right now when I press remove, every new created redenerItem is deleted and not just the one being clicked.

Any help appreciated 🙂

>Solution :

Because you have a single element that you’re adding all of the entries to, when you press the remove button and it clears that single element, it clears all of the entries. What you probably want is a system that stores an array of all the items in the list, then selectively removing them. You might be able to use this:

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

let totalAmount = 0;

theForm.addEventListener('submit', function (e) {
  e.preventDefault();
  totalAmount += parseInt(selectOption.value);
  //The Array.push method returns the new length of the array that we can use to get the item position
  let itemPos = listItems.push(document.createElement('div')) - 1;
  listItems[itemPos].innerHTML = `
  <div class="left-side">
      <h2>${taskInput.value}</h2>
      <button class='remove' onclick='removeItem(${itemPos}, ${selectOption.value})'>Remove</button>
  </div>
  <h2><span>$</span>${selectOption.value}</h2>
  `;
  renderItems.appendChild(listItems[itemPos]);

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

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

//Move the remove item functionality to a new function
function removeItem(index, value) {
  listItems[index].remove(); //Remove the element from the DOM
  listItems.splice(index, 1); //Remove the element from the array
  totalAmount -= value;
  totalSum.textContent = `$${totalAmount}`;
}
<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>

Leave a Reply