Home How to add an item to a list using DOM manipulation without the original list repeating

Questions

How to add an item to a list using DOM manipulation without the original list repeating

June 8, 2023

I am creating a program which gives the user a set of grocery items for a shopping list and displays it. It then gives the user an input in the form of an html form. It must use that input to add to the list. My issue is that after I input a new value it gives the original list plus the new updated list.

//This is a javascript program which added the items in my array to an unordered list
let myArray = ["Sugar", "Milk", "Bread", "Apples"];
let list1 = document.querySelector("#itemList");

//This function pushed my array items to create the list
arrayList = (arr) => {
  let items = arr.forEach(item => {
    let li = document.createElement('li');
    li.textContent = item;
    list1.appendChild(li)
  });
}

arrayList(myArray)


//This function changed the background color of two of the list items to show that they are sold
const idSelector = () => {
  let idElement = document.getElementsByTagName("li")
  idElement[0].style.color = "red"
  idElement[3].style.color = "red"
  console.log(idElement.value)
}

idSelector()

//This function uses the user input from the form to add items to the list
updateList = (arr) => {
  let blue = document.getElementById("input").value;
  alert(blue)

  if (blue === "") {
    alert("Please enter a value if you wish to add something to your list.")
  } else {
    arr.push(blue);
    console.log(arr)
    arrayList(myArray)
  }

}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Shopping List</title>

  <!-- Link Google Font -->
  <link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
  <!-- External CSS link-->
  <link rel="stylesheet" href="./css/styles.css">
</head>

<body>
  <div class="container">
    <h2>Shopping List</h2>

    <div class="header">
      <input type="text" id="input" placeholder="Item">
      <span onclick="updateList(myArray)" id="addBtn"><button>Add Item</button></span>
    </div>

    <ul id="itemList">
      <span value="\uOOD7" class="close">

        </span>
    </ul>
  </div>

  <script src="mainForTask2.js"></script>
</body>

</html>

>Solution :

Before creating the new list we need to clear the existing list so using innerhtml we cleared the list and then created the new one.

let myArray = ["Sugar", "Milk", "Bread", "Apples"];
        let list1 = document.querySelector("#itemList");

        //This function pushed my array items to create the list
        arrayList = (arr) => {
            let items = arr.forEach(item => {
                let li = document.createElement('li');
                li.textContent = item;
                list1.appendChild(li)
            });
        }

        arrayList(myArray)


        //This function changed the background color of two of the list items to show that they are sold
        const idSelector = () => {
            let idElement = document.getElementsByTagName("li")
            idElement[0].style.color = "red"
            idElement[3].style.color = "red"
            console.log(idElement.value)
        }

        idSelector()

        //This function uses the user input from the form to add items to the list
        updateList = (arr) => {
            let blue = document.getElementById("input").value;
            alert(blue)

            if (blue === "") {
                alert("Please enter a value if you wish to add something to your list.")
            } else {
                arr.push(blue);
                console.log(arr)
                list1.innerHTML=''; //Changes
                arrayList(myArray)
                idSelector() //Changes
            }

        }

<div class="container">
        <h2>Shopping List</h2>

        <div class="header">
            <input type="text" id="input" placeholder="Item">
            <span onclick="updateList(myArray)" id="addBtn"><button>Add Item</button></span>
        </div>

        <ul id="itemList">
            <span value="\uOOD7" class="close">

            </span>
        </ul>
    </div>