create a delete button for a li in javascript-CodePudding

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?

CodePudding user response：

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>