JavaScript动态列表项中删除按钮的精确位置控制

<h1>Javascript event listener</h1>
<input id="user" type="text" placeholder="enter item here">
<button id="enter">Enter</button>
<p id="test"></p>
<ul>
  <li class="red blue" random="26"><button class="clearButton">X</button>lettuce</li>
  <li><button class="clearButton">X</button>apples</li>
  <li><button class="clearButton">X</button>oranges</li>
  <li><button class="clearButton">X</button>fruits</li>
  <li><button class="clearButton">X</button>candy</li>
</ul>

ul {
  list-style-type: none; /* 移除列表项默认的项目符号 */
  padding: 0; /* 移除内边距 */
  width: 15rem; /* 设置列表宽度 */
}

li button {
  color: red; /* 按钮文字颜色 */
  margin-right: .5rem; /* 按钮右侧外边距，与文本分隔 */
  border-radius: 10px; /* 按钮圆角 */
  border: none; /* 移除边框 */
}

/* 额外样式，提升用户体验 */
li:hover, li button:hover {
  cursor: pointer; /* 悬停时显示手型光标 */
}

.done {
  text-decoration: line-through; /* 完成状态下文本显示删除线 */
}

var button = document.getElementById("enter");
var input = document.getElementById("user");
var ul = document.querySelector("ul");
// 获取页面初始存在的<li>元素和删除按钮，并为它们绑定事件
var liElements = document.querySelectorAll("li"); 
var clearButtons = document.getElementsByClassName("clearButton");

/**
 * 检查输入框是否有内容
 * @returns {number} 输入内容的长度
 */
function listItems() {
  return input.value.length;
}

/**
 * 创建并添加一个新的列表项到<ul>中
 */
function createListElement() {
  var li = document.createElement("li"); // 创建新的<li>元素

  // 1. 创建并追加删除按钮到<li>元素
  var newButton = document.createElement("button");
  newButton.innerHTML = "X"; // 设置按钮文本
  li.appendChild(newButton); // **关键：先追加按钮**

  // 2. 然后追加文本内容到<li>元素
  li.appendChild(document.createTextNode(input.value)); // **再追加文本**

  input.value = ""; // 清空输入框内容

  // 为新创建的<li>添加点击事件，用于标记完成状态
  li.addEventListener("click", function() {
    li.classList.toggle("done");
  });

  // 为新创建的删除按钮添加点击事件
  newButton.addEventListener("click", function(event) {
    event.stopPropagation(); // **阻止事件冒泡**：防止点击删除按钮时触发<li>的点击事件
    ul.removeChild(li); // 从<ul>中移除当前<li>元素
  });

  ul.appendChild(li); // 将构造好的<li>添加到<ul>中
}

/**
 * 处理“Enter”按钮点击事件
 */
function addItemAfterEnter() {
  if (listItems() > 0) {
    createListElement();
  }
}

/**
 * 处理输入框键盘按下事件（特别是回车键）
 * @param {Event} event - 键盘事件对象
 */
function addItemAfterKeypress(event) {
  if (listItems() > 0 && event.keyCode === 13) { // 检查是否有内容且按下了回车键
    createListElement();
  }
}

// 绑定事件监听器到“Enter”按钮和输入框
button.addEventListener("click", addItemAfterEnter);
input.addEventListener("keypress", addItemAfterKeypress);

// 为页面初始存在的<li>元素添加点击事件
for (var i = 0; i < liElements.length; i++) {
  liElements[i].addEventListener("click", function() {
    this.classList.toggle("done");
  });
}

// 为页面初始存在的删除按钮添加点击事件
for (var i = 0; i < clearButtons.length; i++) {
  clearButtons[i].addEventListener("click", function(event) {
    event.stopPropagation(); // 阻止事件冒泡
    this.parentNode.remove(); // 移除按钮的父节点（即<li>元素）
  });
}

// 之前的顺序（导致按钮在右侧）：
// li.appendChild(document.createTextNode(input.value)); // 先文本
// ...
// li.appendChild(newButton); // 后按钮

// 现在的顺序（确保按钮在左侧）：
var newButton = document.createElement("button");
newButton.innerHTML = "X";
li.appendChild(newButton); // **先追加按钮**
li.appendChild(document.createTextNode(input.value)); // **再追加文本**