如何在jQuery待办列表中实现可复制的正确管道分隔符

问题背景 #

实现带管道（|）分隔符的待办列表，要求分隔符为真实DOM节点（支持复制功能），且删除首个元素后，新的首个元素前不会残留多余分隔符。

解决方案思路 #

采用数据驱动视图的方式：用数组维护待办项数据，每次增删操作后重新渲染整个列表，确保分隔符仅在非首个元素前添加，从根源避免分隔符残留问题。

代码实现 #

HTML 结构

<input type="text" id="todo-input" placeholder="输入待办项">
<button id="add-todo">添加</button>
<div id="todo-list" style="margin-top: 10px;"></div>
<button id="copy-list" style="margin-top: 10px;">复制列表</button>

jQuery 代码

// 存储待办项的数组，统一维护数据
let todoItems = [];

// 添加待办项逻辑
$('#add-todo').on('click', function() {
  const inputText = $('#todo-input').val().trim();
  if (!inputText) return;
  
  todoItems.push(inputText);
  renderTodoList();
  $('#todo-input').val(''); // 清空输入框
});

// 核心渲染函数：负责生成待办项和分隔符
function renderTodoList() {
  const $listContainer = $('#todo-list');
  $listContainer.empty(); // 清空现有内容，避免残留

  todoItems.forEach((item, index) => {
    // 非首个元素，先添加分隔符节点
    if (index > 0) {
      $listContainer.append('<span class="separator" style="margin: 0 5px;">|</span>');
    }

    // 创建待办项元素，附带删除按钮
    const $todoItem = $('<span class="todo-item"></span>').text(item);
    const $deleteBtn = $('<button style="margin-left: 5px; padding: 0 4px;">×</button>');
    
    // 删除按钮点击事件：移除对应数据后重新渲染
    $deleteBtn.on('click', () => {
      todoItems.splice(index, 1);
      renderTodoList();
    });

    $todoItem.append($deleteBtn);
    $listContainer.append($todoItem);
  });
}

// 复制列表逻辑（捕获真实DOM文本，包括分隔符）
$('#copy-list').on('click', async function() {
  const listContent = $('#todo-list').text();
  await navigator.clipboard.writeText(listContent);
  alert('列表已复制到剪贴板');
});

方案优势 #

• 无分隔符残留：每次渲染都会清空列表后重新生成，不会出现空DOM元素或多余分隔符
• 支持复制：分隔符是真实的<span>DOM节点，能被剪贴板正确捕获，满足复制需求
• 逻辑清晰：数据与视图分离，增删操作仅修改数组，渲染逻辑统一处理，易于维护

内容的提问来源于stack exchange，提问作者blogob