如何让JavaScript动态生成的li元素删除按钮显示在左侧

问题原因 #

静态列表项的删除按钮在左侧，是因为HTML结构里按钮元素写在文本内容前面；而你通过JS新增列表项时，先给<li>添加了文本节点，再追加按钮，DOM元素的顺序直接决定了渲染顺序，所以按钮被放到了文本右侧。

修复方案 #

修改createListElement函数，调整元素添加顺序：先创建按钮并插入到<li>中，再添加文本内容；同时给新按钮加上原有按钮的clearButton类名，保证样式和交互逻辑统一。

修改后的完整JavaScript代码 #

var button = document.getElementById("enter")
var input = document.getElementById("user");
var ul = document.querySelector("ul");
var li = document.querySelectorAll("li");
var clearButton = document.getElementsByClassName("clearButton");

function listItems() {
  return input.value.length
}

function createListElement() {
  var li = document.createElement("li");
  // 先创建按钮并添加到li
  var newButton = document.createElement("button");
  newButton.innerHTML = "X";
  newButton.classList.add("clearButton"); // 加上原有按钮的类名
  li.appendChild(newButton);
  // 再添加文本节点
  li.appendChild(document.createTextNode(input.value));
  ul.appendChild(li);
  input.value = "";
  
  li.addEventListener("click", function() {
    li.classList.toggle("done");
  })

  newButton.addEventListener("click", function() {
    ul.removeChild(li);
  })
}

function addItemAfterEnter() {
  if (listItems() > 0) {
    createListElement();
  }
}

function addItemAfterKeypress(event) {
  if (listItems() > 0 && event.keyCode === 13) {
    createListElement();
  }
}

button.addEventListener("click", addItemAfterEnter);
input.addEventListener("keypress", addItemAfterKeypress)

for (var i = 0; i < li.length; i++) {
  li[i].addEventListener("click", function() {
    this.classList.toggle("done");
  })
}

for (var i = 0; i < clearButton.length; i++) {
  clearButton[i].addEventListener("click", function() {
    this.parentNode.remove();
  })
}

说明 #

• 调整了按钮和文本节点的添加顺序，让按钮先被插入到<li>，保证渲染在左侧
• 给新按钮添加clearButton类名，确保它和原有按钮使用相同的CSS样式，同时保持结构规范
• CSS和HTML代码无需修改，保持原有内容即可

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