Coding – Step 9.2: JavaScript from Scratch – Remove and Edit List Items

Welcome to Step 9.2 of our JavaScript from Scratch series.

After learning how to add items to your shopping list, today we’ll take it to the next level: you’ll be able to edit and delete each item, just like in a real interactive app.

And, as always, we’ll explain everything step by step — so you know exactly what you’re doing and why.

What is the DOM?

The DOM (Document Object Model) is a live, structured representation of your HTML page. Think of it as a tree of elements that JavaScript can interact with in real time.

Every HTML tag (<div>, <ul>, <li>, etc.) is a node in this tree.

✅ For example, when you use document.getElementById("item-input"), you’re telling the browser:
“Find the part of the page with id="item-input" and give me access to it.”

So JavaScript doesn’t change your HTML file directly — it talks to the DOM, which changes what the user sees in real time.

The Code: Add – Edit – Remove

🔹 HTML – The structure of the list

<div class="shopping-app">
  <h2>Your Shopping List 📝</h2>
  <div class="input-group">
    <input type="text" id="item-input" placeholder="Add an item..." />
    <button id="add-btn">Add</button>
  </div>
  <ul id="shopping-list"></ul>
</div>

JavaScript – The interactive logic

<script>
document.addEventListener("DOMContentLoaded", () => {
  const list = document.getElementById("shopping-list");
  const addBtn = document.getElementById("add-btn");
  const input  = document.getElementById("item-input");

  function addItem(text) {
    const li = document.createElement("li");
    const span = document.createElement("span");
    span.textContent = text;

    const editBtn = document.createElement("button");
    editBtn.textContent = "Edit";
    editBtn.className = "edit-btn";
    editBtn.addEventListener("click", () => {
      const newText = prompt("Edit item:", span.textContent);
      if (newText !== null && newText.trim() !== "") {
        span.textContent = newText.trim();
      }
    });

    const removeBtn = document.createElement("button");
    removeBtn.textContent = "Remove";
    removeBtn.className = "remove-btn";
    removeBtn.addEventListener("click", () => {
      li.remove();
    });

    li.appendChild(span);
    li.appendChild(editBtn);
    li.appendChild(removeBtn);
    list.appendChild(li);
  }

  addBtn.addEventListener("click", () => {
    const value = input.value.trim();
    if (value !== "") {
      addItem(value);
      input.value = "";
      input.focus();
    }
  });

  input.addEventListener("keyup", event => {
    if (event.key === "Enter") addBtn.click();
  });
});
</script>

CSS – To make it clean and nice

.input-group {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}
#item-input {
  flex: 1;
  padding: 8px;
}
.edit-btn, .remove-btn {
  margin-left: 8px;
  padding: 5px 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.edit-btn {
  background-color: #3498db;
  color: white;
}
.remove-btn {
  background-color: #e74c3c;
  color: white;
}
.edit-btn:hover {
  background-color: #2980b9;
}
.remove-btn:hover {
  background-color: #c0392b;
}

Explaining Every Line (JavaScript)

▶️ document.getElementById(...)

Grabs an element from the DOM. This connects your JS to HTML.

▶️ addEventListener("click", ...)

Attaches a reaction (function) to an event — like clicking a button.

▶️ createElement("li"), createElement("button")

Creates new HTML elements dynamically.

▶️ appendChild(...)

Inserts one element into another — like buttons inside a list item.

▶️ prompt(...)

Shows a popup to let the user enter new text (for editing).

▶️ li.remove()

Deletes the entire list item from the DOM.

▶️ textContent

Reads or sets the visible text of an element.

▶️ keyup + event.key === "Enter"

Lets the user hit Enter instead of clicking the Add button.

 Click here to test the project

📘 Command Glossary

✅ Summary

In Step 9.2, you learned how to:

• Understand and interact with the DOM.
• Create, edit, and remove elements dynamically.
• Style buttons and inputs for a clean interface.
• Listen for user input via clicks or the keyboard.

🎯 You’ve now built a mini app — interactive, user-friendly, and entirely made with vanilla JavaScript.