当前位置：首页 > JavaScript

js 实现增加删除

2026-04-04 13:47:55JavaScript

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

增加元素

通过 createElement 方法创建新元素，并使用 appendChild 或 insertBefore 将其添加到 DOM 中。

// 创建新元素
const newElement = document.createElement('div');
newElement.textContent = '新添加的元素';

// 添加到父元素的末尾
document.getElementById('parent').appendChild(newElement);

// 插入到特定元素之前
const referenceElement = document.getElementById('reference');
document.getElementById('parent').insertBefore(newElement, referenceElement);

删除元素

使用 removeChild 或 remove 方法从 DOM 中移除元素。

// 通过父元素删除子元素
const parent = document.getElementById('parent');
const childToRemove = document.getElementById('child');
parent.removeChild(childToRemove);

// 直接删除元素（现代浏览器支持）
const elementToRemove = document.getElementById('element');
elementToRemove.remove();

动态列表的增删示例

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

<ul id="list">
  <li>项目1</li>
  <li>项目2</li>
</ul>
<input type="text" id="newItem" placeholder="输入新项目">
<button onclick="addItem()">添加</button>

<script>
function addItem() {
  const input = document.getElementById('newItem');
  const text = input.value.trim();
  if (text) {
    const list = document.getElementById('list');
    const newItem = document.createElement('li');
    newItem.textContent = text;
    newItem.onclick = function() {
      this.remove();
    };
    list.appendChild(newItem);
    input.value = '';
  }
}

// 为现有列表项添加点击删除功能
document.querySelectorAll('#list li').forEach(item => {
  item.onclick = function() {
    this.remove();
  };
});
</script>

使用事件委托优化性能

对于大量动态元素，使用事件委托可以提高性能：

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

注意事项

确保在操作 DOM 前元素已加载完成，可将脚本放在页面底部或使用 DOMContentLoaded 事件
删除元素前应考虑是否需要保存数据或触发其他操作
动态添加的元素如需事件监听，推荐使用事件委托而非逐个绑定

框架中的实现（Vue 示例）

new Vue({
  el: '#app',
  data: {
    items: ['项目1', '项目2'],
    newItem: ''
  },
  methods: {
    addItem() {
      if (this.newItem.trim()) {
        this.items.push(this.newItem);
        this.newItem = '';
      }
    },
    removeItem(index) {
      this.items.splice(index, 1);
    }
  }
});

对应的 HTML 结构：

js 实现增加删除

<div id="app">
  <ul>
    <li v-for="(item, index) in items" @click="removeItem(index)">
      {{ item }}
    </li>
  </ul>
  <input v-model="newItem" placeholder="输入新项目">
  <button @click="addItem">添加</button>
</div>

标签: js