JavaScript Array Add and Remove Demo

This interactive demo lets you add values to an array and remove any displayed value by index. It keeps the original demo purpose but uses DOM methods and event listeners instead of inline JavaScript and generated HTML strings.

Total elements: 0

Core JavaScript Used in the Demo Top ↑

const data = [];

data.push(value);        // add at the end
data.splice(index, 1);  // remove one item at a known index

The complete live demo above rebuilds the displayed list after each change and uses textContent for user-supplied values, avoiding HTML injection through the input.

Complete HTML Pattern for the Demo Top ↑

<label for="arrayItem">Value to add</label>
<input id="arrayItem" type="text">
<button id="addItem" type="button">Add to array</button>
<ul id="arrayItems"></ul>

<script>
const data = [];
const input = document.getElementById("arrayItem");
const list = document.getElementById("arrayItems");

document.getElementById("addItem").addEventListener("click", () => {
  const value = input.value.trim();
  if (value === "") return;
  data.push(value);
});

// Remove one item when its current index is known
data.splice(index, 1);
</script>

push() Tutorial push() Demo indexOf() splice() Tutorial

Empty an Array → ← Array Reference Display Array Elements →

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: