DEV Community

Patricia Hernandez
Patricia Hernandez

Posted on

Create JavaScript Dynamic List (Step-by-Step Guide)

#webdev #programming #beginners #javascript

A dynamic list updates based on user actions like adding, removing, or editing items. In this tutorial, you'll learn how to create a dynamic list using HTML, CSS, and JavaScript.

Prerequisites

  • Basic knowledge of HTML, CSS, and JavaScript
  • A code editor (like VS Code)
  • A browser for testing

Set Up HTML Structure

Create a basic HTML file:

<!DOCTYPE html>
<html>
<head>
  <title>Dynamic List</title>
  <style>
    ul {
      padding-left: 20px;
    }
    li {
      margin-bottom: 5px;
    }
    button {
      margin-left: 10px;
    }
  </style>
</head>
<body>
  <h2>Dynamic List</h2>
  <input type="text" id="itemInput" placeholder="Enter item">
  <button onclick="addItem()">Add</button>

  <ul id="itemList"></ul>

  <script src="script.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Write JavaScript Logic

Create a file named script.js and add the following code:

function addItem() {
  const input = document.getElementById('itemInput');
  const value = input.value.trim();

  if (value === '') return;

  const li = document.createElement('li');
  li.textContent = value;

  const removeBtn = document.createElement('button');
  removeBtn.textContent = 'Remove';
  removeBtn.onclick = function () {
    li.remove();
  };

  li.appendChild(removeBtn);
  document.getElementById('itemList').appendChild(li);

  input.value = '';
  input.focus();
}
Enter fullscreen mode Exit fullscreen mode

How It Works?

  1. The user types a value in the input field.
  2. When the Add button is clicked, addItem() runs.
  3. It creates a new
  4. with the input text and a "Remove" button.
  5. Clicking "Remove" deletes that item.

Here is the full example in JSFiddle.

Conclusion

You now have a simple dynamic list using JavaScript. You can improve it by saving items to localStorage, adding edit buttons, or using frameworks like React for complex UIs.

Top comments (0)