create a delete button for a li in javascript

Question

I created a list to add items to it, however, I'm also trying to add a delete button to remove any Item that's being added to my list, but I can't get it to work,

see snippet below

const form = document.querySelector("form");
const product = document.querySelector("#fruitName");
const quantity = document.querySelector("#qty");
const list = document.querySelector("#list");

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const item = fruitName.value;
  const numOfItmes = qty.value;
  const newLi = document.createElement("li");

  newLi.innerText = `${numOfItmes} ${item}`;
  list.appendChild(newLi);

  button.addEventListener("click", () => {
    const button = document.createElement("button");
    button.textContent = "X";
    li.appendChild(button);
  });
  form.qty.value = "";
  form.fruitName.value = "";
});

button {
  width: 100px;
  height: 100px;
  margin: 20px;
}

#fruit {
  width: auto;
  height: auto;
}

<!DOCTYPE html>
<html lang="en">
  <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" />
    <link rel="stylesheet" href="color.css" />
    <title>Document</title>
  </head>
  <body>
    <h1>Welcome!</h1>

    <form action="test">
      <label for="item">Enter Product</label>
      <input type="text" id="fruitName" />
      <label for="item">Enter A Quantity</label>
      <input type="number" id="qty" name="qty" />
      <button id="fruit">Submit</button>
    </form>
    <ul id="list"></ul>
    <script src="color.js"></script>
    </body>
    </html>

I created a list to add items to it, however, I'm also trying to add a delete button to remove any Item that's being added to my list, but I can't get it to work,

see my code below

const form = document.querySelector("form");
const product = document.querySelector("#fruitName");
const quantity = document.querySelector("#qty");
const list = document.querySelector("#list");

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const item = fruitName.value;
  const numOfItmes = qty.value;
  const newLi = document.createElement("li");

  newLi.innerText = `${numOfItmes} ${item}`;
  list.appendChild(newLi);

  button.addEventListener("click", () => {
    const button = document.createElement("button");
    button.textContent = "X";
    li.appendChild(button);
  });
  form.qty.value = "";
  form.fruitName.value = "";
});

<h1>Welcome!</h1>

<form action="test">
  <label for="item">Enter Product</label>
  <input type="text" id="fruitName" />
  <label for="item">Enter A Quantity</label>
  <input type="number" id="qty" name="qty" />
  <button id="fruit">Submit</button>
</form>
<ul id="list"></ul>

can anyone help me with this?

Have you noticed the error on the browser's development console? — David
– David, Commented Nov 29, 2022 at 15:43

human bean · Accepted Answer · 2022-11-29 15:46:16Z

1

You were creating the li's child button element in the wrong place, and you weren't removing the li at all when it was clicked. Here's the working code:

const form = document.querySelector("form");
const product = document.querySelector("#fruitName");
const quantity = document.querySelector("#qty");
const list = document.querySelector("#list");

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const item = fruitName.value;
  const numOfItmes = qty.value;
  const newLi = document.createElement("li");

  newLi.innerText = `${numOfItmes} ${item}`;
  list.appendChild(newLi);

  // create button outside of event listener
  const button = document.createElement("button");
  button.textContent = "X";
  newLi.appendChild(button);

  // remove the created li element when button is clicked
  button.addEventListener("click", () => {
    newLi.remove();
  });

  form.qty.value = "";
  form.fruitName.value = "";
});

<h1>Welcome!</h1>

<form action="test">
  <label for="item">Enter Product</label>
  <input type="text" id="fruitName" />
  <label for="item">Enter A Quantity</label>
  <input type="number" id="qty" name="qty" />
  <button id="fruit">Submit</button>
</form>
<ul id="list"></ul>

answered Nov 29, 2022 at 15:46

human bean

8597 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Motty Over a year ago

Thanks, working now

Collectives™ on Stack Overflow

create a delete button for a li in javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related