How can I add a delete button for every list item added with javascript?

Question

I have a beginning javascript project trying to build small projects. I want to add list delete button but ı don't know how can I add a delete button for each line. I have already created a delete button for deleting list items but it only appears for last added list item. How can I make it appear for every list item ?

'use strict';

const rootEl = document.getElementById('root');

const form = document.createElement('form');
form.setAttribute('data-id', 'purchase-form');
rootEl.appendChild(form);

const message = document.createElement('div');
message.setAttribute('data-id', 'message');
form.appendChild(message);

const inputName = document.createElement('input');
inputName.setAttribute('data-input', 'name');
form.appendChild(inputName);

const inputPrice = document.createElement('input');
inputPrice.setAttribute('data-input', 'price');
inputPrice.setAttribute('type', 'number');
form.appendChild(inputPrice);

const buttonSubmit = document.createElement('button');
buttonSubmit.setAttribute('data-action', 'add');
buttonSubmit.textContent = 'Добавить';
form.appendChild(buttonSubmit);

const listPurchases = document.createElement('ul');
listPurchases.setAttribute('data-id', 'purchases-list');
rootEl.appendChild(listPurchases);

const div = document.createElement('div');
div.textContent = 'Самая дорогая покупка: ';
rootEl.appendChild(div);

const span = document.createElement('span');
span.setAttribute('data-id', 'most-expensive');
span.textContent = 'нет покупок';
div.appendChild(span);

const deleteButton = document.createElement('button');
deleteButton.setAttribute('data-action', 'remove');
deleteButton.setAttribute('type', 'button');
deleteButton.textContent = 'Удалить';

let nextId = 1;
const purchases = [];
let cashback = 0.005;

const purchaseForm = rootEl.querySelector('[data-id="purchase-form"]');
const nameInput = purchaseForm.querySelector('[data-input="name"]');
const priceInput = purchaseForm.querySelector('[data-input="price"]');
const button = purchaseForm.querySelector('[data-action="add"]');
const purchasesList = document.querySelector('[data-id="purchases-list"]');
const mostExpensive = rootEl.querySelector('[data-id="most-expensive"]');
const messageEl = rootEl.querySelector('[data-id="message"]');
const Buttondelete = rootEl.querySelector('[data-action="remove"]');

nameInput.focus();

purchaseForm.onsubmit = (evt) => {
  evt.preventDefault();

  const name = nameInput.value.trim();

  const price = Number(priceInput.value);
  // cashback = price > 1 ? 0.005 : 0;
  if (name !== '' && price !== null && price > 0) {
    messageEl.textContent = '';
    purchases.unshift({
      id: nextId++,
      name: name,
      price: price,
    });
    nameInput.focus();
    createElement(name);
    newPurchase.appendChild(deleteButton);
    purchaseForm.reset();
    mostExpensive.textContent = `${name} на сумму ${
      calculatemostExpensive().price
    } с.`;
  }
  if (name === '') {
    messageEl.textContent = '"Значение поля не может быть пустым"';
    nameInput.focus();
  } else if (!price) {
    messageEl.textContent = '"Значение поля не может быть пустым"';
    priceInput.focus();
  } else if (price < 0) {
    messageEl.textContent = '"Значение поля не может быть пустым"';
    priceInput.focus();
  }
  // else if ([price === '']) {
  //   messageEl.textContent = '"Значение поля не может быть пустым"';
  //   priceInput.focus();
  // }
  if (price > 0 && name !== '') {
    messageEl.textContent = '';
  }
};

let newPurchase;
function createElement(ci) {
  newPurchase = document.createElement('li');
  newPurchase.setAttribute('data-purchase-id', nextId - 1);
  newPurchase.textContent = `${ci} на сумму ${priceInput.value} с. `;
  purchasesList.prepend(newPurchase);
  purchasesList.insertBefore(newPurchase, newPurchase);

  deleteButton.onclick = (evt) => {
    evt.preventDefault();
    debugger;
    newPurchase.parentNode.removeChild(newPurchase);
  };
}

let max;

function calculatemostExpensive() {
  debugger;
  return (max = purchases.reduce(
    (prev, current) => (prev.price > current.price ? prev : current),
    1
  ));
}

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
    <link rel="stylesheet" href="./css/styles.css" />
  </head>
  <body>
    <noscript
      >Необходимо включить поддержку JavaScript в вашем браузере.</noscript
    >
    <div id="root"></div>

    <script src="./js/app.js"></script>
  </body>
</html>

Mamun · Accepted Answer · 2021-05-14 11:57:02Z

I have made the following updates in your code:

Move the Delete button code inside onsubmit.
Pass the delete button reference like createElement(name, deleteButton);
Remove the button using target property of the event like:

evt.target.parentNode.remove();

Demo:

'use strict';

const rootEl = document.getElementById('root');

const form = document.createElement('form');
form.setAttribute('data-id', 'purchase-form');
rootEl.appendChild(form);

const message = document.createElement('div');
message.setAttribute('data-id', 'message');
form.appendChild(message);

const inputName = document.createElement('input');
inputName.setAttribute('data-input', 'name');
form.appendChild(inputName);

const inputPrice = document.createElement('input');
inputPrice.setAttribute('data-input', 'price');
inputPrice.setAttribute('type', 'number');
form.appendChild(inputPrice);

const buttonSubmit = document.createElement('button');
buttonSubmit.setAttribute('data-action', 'add');
buttonSubmit.textContent = 'Добавить';
form.appendChild(buttonSubmit);

const listPurchases = document.createElement('ul');
listPurchases.setAttribute('data-id', 'purchases-list');
rootEl.appendChild(listPurchases);

const div = document.createElement('div');
div.textContent = 'Самая дорогая покупка: ';
rootEl.appendChild(div);

const span = document.createElement('span');
span.setAttribute('data-id', 'most-expensive');
span.textContent = 'нет покупок';
div.appendChild(span);

let nextId = 1;
const purchases = [];
let cashback = 0.005;

const purchaseForm = rootEl.querySelector('[data-id="purchase-form"]');
const nameInput = purchaseForm.querySelector('[data-input="name"]');
const priceInput = purchaseForm.querySelector('[data-input="price"]');
const button = purchaseForm.querySelector('[data-action="add"]');
const purchasesList = document.querySelector('[data-id="purchases-list"]');
const mostExpensive = rootEl.querySelector('[data-id="most-expensive"]');
const messageEl = rootEl.querySelector('[data-id="message"]');
const Buttondelete = rootEl.querySelector('[data-action="remove"]');

nameInput.focus();

purchaseForm.onsubmit = (evt) => {
  evt.preventDefault();

  const deleteButton = document.createElement('button');
  deleteButton.setAttribute('data-action', 'remove');
  deleteButton.setAttribute('type', 'button');
  deleteButton.textContent = 'Удалить';

  const name = nameInput.value.trim();

  const price = Number(priceInput.value);
  // cashback = price > 1 ? 0.005 : 0;
  if (name !== '' && price !== null && price > 0) {
    messageEl.textContent = '';
    purchases.unshift({
      id: nextId++,
      name: name,
      price: price,
    });
    nameInput.focus();
    createElement(name, deleteButton);
    newPurchase.appendChild(deleteButton);
    purchaseForm.reset();
    mostExpensive.textContent = `${name} на сумму ${
      calculatemostExpensive().price
    } с.`;
  }
  if (name === '') {
    messageEl.textContent = '"Значение поля не может быть пустым"';
    nameInput.focus();
  } else if (!price) {
    messageEl.textContent = '"Значение поля не может быть пустым"';
    priceInput.focus();
  } else if (price < 0) {
    messageEl.textContent = '"Значение поля не может быть пустым"';
    priceInput.focus();
  }
  // else if ([price === '']) {
  //   messageEl.textContent = '"Значение поля не может быть пустым"';
  //   priceInput.focus();
  // }
  if (price > 0 && name !== '') {
    messageEl.textContent = '';
  }
};

let newPurchase;
function createElement(ci, deleteButton) {
  newPurchase = document.createElement('li');
  newPurchase.setAttribute('data-purchase-id', nextId - 1);
  newPurchase.textContent = `${ci} на сумму ${priceInput.value} с. `;
  purchasesList.prepend(newPurchase);
  purchasesList.insertBefore(newPurchase, newPurchase);

  deleteButton.onclick = (evt) => {
    evt.preventDefault();
    debugger;
    evt.target.parentNode.remove();
  };
}

let max;

function calculatemostExpensive() {
  debugger;
  return (max = purchases.reduce(
    (prev, current) => (prev.price > current.price ? prev : current),
    1
  ));
}

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
    <link rel="stylesheet" href="./css/styles.css" />
  </head>
  <body>
    <noscript
      >Необходимо включить поддержку JavaScript в вашем браузере.</noscript
    >
    <div id="root"></div>

    <script src="./js/app.js"></script>
  </body>
</html>

that actually makes sense, everytime a purchase is created , a delete button creates at the same time

Lonnie Best · Accepted Answer · 2021-05-14 12:07:08Z

0

If you want each item to have its own delete button, you must create a separate delete button for each item.

You've only created one delete button, and each time you append it, it moves that single button to the very last element you appended it to.

answered May 14, 2021 at 12:07

Lonnie Best

11.6k15 gold badges69 silver badges113 bronze badges

Collectives™ on Stack Overflow

How can I add a delete button for every list item added with javascript?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related