当前位置：首页 > JavaScript

js 实现增加删除

2026-01-30 21:58:24JavaScript

使用 JavaScript 实现元素的增加与删除

增加元素

通过 createElement 和 appendChild 方法动态创建并添加元素到 DOM 中：

// 创建新元素
const newElement = document.createElement('div');
newElement.textContent = '新增内容';

// 添加到指定父节点
const parent = document.getElementById('parentContainer');
parent.appendChild(newElement);

删除元素

使用 removeChild 或 remove 方法移除指定元素：

// 方法1：通过父节点删除子节点
const child = document.getElementById('childElement');
child.parentNode.removeChild(child);

// 方法2：直接调用remove()
document.getElementById('childElement').remove();

操作列表的增删示例

以下是一个实现列表项动态增删的完整示例：

<ul id="itemList">
  <li>初始项1</li>
</ul>
<input type="text" id="newItemInput">
<button onclick="addItem()">添加</button>
<button onclick="removeLastItem()">删除最后项</button>

<script>
  function addItem() {
    const input = document.getElementById('newItemInput');
    if (input.value.trim() === '') return;

    const list = document.getElementById('itemList');
    const newItem = document.createElement('li');
    newItem.textContent = input.value;
    list.appendChild(newItem);
    input.value = '';
  }

  function removeLastItem() {
    const list = document.getElementById('itemList');
    if (list.children.length > 0) {
      list.removeChild(list.lastElementChild);
    }
  }
</script>

使用事件委托优化删除操作

对于动态生成的多个元素，推荐使用事件委托处理删除：

document.getElementById('itemList').addEventListener('click', (e) => {
  if (e.target.tagName === 'LI') {
    e.target.remove();
  }
});

数组操作的增删方法

JavaScript 数组原生提供增删方法，可与 DOM 操作结合：

js 实现增加删除

// 数组增加元素
const arr = [1, 2];
arr.push(3); // 末尾添加
arr.unshift(0); // 开头添加

// 数组删除元素
arr.pop(); // 删除末尾
arr.shift(); // 删除开头
arr.splice(1, 1); // 删除指定位置

标签: js