时间戳

首页 > 解决方案 > 如何为使用 javascript 添加的每个列表项添加删除按钮？

javascript - 如何为使用 javascript 添加的每个列表项添加删除按钮？

问题描述

我有一个开始尝试构建小型项目的 javascript 项目。我想添加列表删除按钮，但我不知道如何为每一行添加删除按钮。我已经为删除列表项创建了一个删除按钮，但它只出现在最后添加的列表项中。我怎样才能让它出现在每个列表项中？

'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>

标签： javascript

解决方案

我在您的代码中进行了以下更新：

  1. 将删除按钮代码移到 onsubmit 中。

  2. 传递删除按钮引用，如createElement(name, deleteButton);

  3. 使用事件的目标属性删除按钮，例如：

    evt.target.parentNode.remove();

演示：

'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>

推荐阅读