JavaScript DOM操作怎么实现向列表项动态添加用户输入内容并附带删除按钮

来源：IPIPP.com作者：陈平安头衔：全栈工程师

导读：本期聚焦于小伙伴创作的《JavaScript DOM操作怎么实现向列表项动态添加用户输入内容并附带删除按钮》，敬请观看详情，探索知识的价值。以下视频、文章将为您系统阐述其核心内容与价值。如果您觉得《JavaScript DOM操作怎么实现向列表项动态添加用户输入内容并附带删除按钮》有用，将其分享出去将是对创作者最好的鼓励。

在前端页面交互开发中，动态操作列表是高频需求，核心是通过JavaScript的DOM API实现用户输入内容的添加、列表项的渲染以及删除功能的绑定，整个过程不需要依赖第三方库，原生JS就能完成。

实现核心思路

整体流程可以拆分为四个步骤：首先获取页面上的用户输入框、添加按钮和列表容器的DOM元素；然后给添加按钮绑定点击事件，触发时先校验输入内容是否为空；接着动态创建列表项元素，把输入内容和删除按钮插入到列表项中；最后给每个删除按钮绑定点击事件，点击时移除对应的列表项。

基础页面结构搭建

先准备基础的HTML结构，包含输入框、添加按钮和无序列表容器，后续JS代码会操作这些元素：

<div class="list-container">
  <input type="text" id="user-input" placeholder="请输入要添加的内容" />
  <button id="add-btn">添加到列表</button>
  <ul id="target-list"></ul>
</div>

JavaScript实现逻辑

1. 获取DOM元素

使用document.getElementById或者document.querySelector获取需要的元素，后续所有操作都基于这些元素对象：

// 获取输入框元素
const inputEl = document.getElementById('user-input');
// 获取添加按钮元素
const addBtn = document.getElementById('add-btn');
// 获取列表容器元素
const listEl = document.getElementById('target-list');

2. 绑定添加按钮点击事件

给添加按钮绑定点击事件，点击时先判断输入框内容是否为空，为空则提示用户，不为空则执行创建列表项的逻辑：

// 给添加按钮绑定点击事件
addBtn.addEventListener('click', function() {
  // 获取输入框的值并去除首尾空格
  const inputValue = inputEl.value.trim();
  // 校验输入内容是否为空
  if (!inputValue) {
    alert('请输入有效的内容');
    return;
  }
  // 调用创建列表项的函数
  createListItem(inputValue);
  // 清空输入框内容
  inputEl.value = '';
});

3. 创建带删除按钮的列表项

封装创建列表项的函数，动态创建<li>元素、文本节点和删除按钮，把删除按钮也插入到列表项中，同时给删除按钮绑定移除当前列表项的事件：

function createListItem(content) {
  // 创建列表项元素
  const liEl = document.createElement('li');
  // 设置列表项的文本内容
  liEl.textContent = content;
  
  // 创建删除按钮
  const deleteBtn = document.createElement('button');
  deleteBtn.textContent = '删除';
  // 给删除按钮添加类名方便样式控制
  deleteBtn.className = 'delete-btn';
  
  // 给删除按钮绑定点击事件，点击时移除当前li元素
  deleteBtn.addEventListener('click', function() {
    liEl.remove();
  });
  
  // 把删除按钮插入到列表项中
  liEl.appendChild(deleteBtn);
  // 把列表项插入到列表容器的末尾
  listEl.appendChild(liEl);
}

4. 支持回车键添加内容

除了点击添加按钮，还可以支持用户在输入框按回车键直接添加内容，提升交互体验：

// 给输入框绑定键盘按下事件
inputEl.addEventListener('keydown', function(e) {
  // 判断按下的键是否是回车键
  if (e.key === 'Enter') {
    // 触发添加按钮的点击事件
    addBtn.click();
  }
});

完整可运行示例

下面是整合了所有逻辑的完整代码，可以直接复制到HTML文件中运行：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>动态列表操作示例</title>
  <style>
    .list-container {
      width: 400px;
      margin: 20px auto;
    }
    #user-input {
      width: 70%;
      padding: 8px;
      box-sizing: border-box;
    }
    #add-btn {
      padding: 8px 16px;
      margin-left: 5px;
    }
    #target-list {
      margin-top: 20px;
      list-style: none;
      padding: 0;
    }
    #target-list li {
      padding: 10px;
      border: 1px solid #eee;
      margin-bottom: 8px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .delete-btn {
      padding: 4px 12px;
      background-color: #ff4444;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    .delete-btn:hover {
      background-color: #cc0000;
    }
  </style>
</head>
<body>
  <div class="list-container">
    <input type="text" id="user-input" placeholder="请输入要添加的内容" />
    <button id="add-btn">添加到列表</button>
    <ul id="target-list"></ul>
  </div>

  <script>
    const inputEl = document.getElementById('user-input');
    const addBtn = document.getElementById('add-btn');
    const listEl = document.getElementById('target-list');

    addBtn.addEventListener('click', function() {
      const inputValue = inputEl.value.trim();
      if (!inputValue) {
        alert('请输入有效的内容');
        return;
      }
      createListItem(inputValue);
      inputEl.value = '';
    });

    inputEl.addEventListener('keydown', function(e) {
      if (e.key === 'Enter') {
        addBtn.click();
      }
    });

    function createListItem(content) {
      const liEl = document.createElement('li');
      liEl.textContent = content;
      
      const deleteBtn = document.createElement('button');
      deleteBtn.textContent = '删除';
      deleteBtn.className = 'delete-btn';
      
      deleteBtn.addEventListener('click', function() {
        liEl.remove();
      });
      
      liEl.appendChild(deleteBtn);
      listEl.appendChild(liEl);
    }
  </script>
</body>
</html>

注意事项

动态创建元素时，所有插入的内容如果是用户输入的，要注意避免XSS风险，如果后续需要支持富文本，要额外做内容转义处理。
给动态创建的删除按钮绑定事件时，不要使用事件代理之外的循环绑定，本示例中是直接给每个按钮绑定事件，元素较少时没问题，如果列表项很多，建议使用事件代理提升性能。
操作DOM时要先确保目标元素已经存在于页面中，避免获取到null导致代码报错。

JavaScript DOM操作动态添加元素事件监听 delete_button修改时间：2026-06-03 21:31:35

免责声明：已尽一切努力确保本网站所含信息的准确性。网站内容多为原创整理与精心编撰，观点力求客观中立。本站旨在免费分享，内容仅供个人学习、研究或参考使用。若引用了第三方作品，版权归原作者所有。如内容涉及您的权益，请联系我们处理。