解决方案

核心思路在于调整 DOM 元素的添加顺序。在创建新的列表项时，先将删除按钮添加到

代码示例

以下是修改后的 JavaScript 代码：

立即学习“Java免费学习笔记（深入）”；

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() {
  // 创建新的 li 元素
  var li = document.createElement("li");

  // 将按钮添加到 li
  var newButton = document.createElement("button");
  newButton.innerHTML = "X";
  li.appendChild(newButton);

  // 然后将文本添加到 li
  li.appendChild(document.createTextNode(input.value));
  input.value = "";

  li.addEventListener("click", function() {
    li.classList.toggle("done");
  });

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

  // 将构造好的 li 添加到 ul
  ul.appendChild(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();
  })
}

关键在于 createListElement 函数中，先创建 newButton 并将其 appendChild 到 li，然后再添加文本节点。

HTTPie AI

AI API开发工具

下载

HTML 结构

以下是对应的 HTML 结构：

Javascript event listener

Enter


  
Xlettuce
  
Xapples
  
Xoranges
  
Xfruits
  
Xcandy

CSS 样式

为了使按钮和文本在视觉上更协调，可以使用 CSS 进行样式调整：

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;
}

margin-right 属性用于调整按钮和文本之间的间距，可以根据实际情况进行调整。

注意事项

• DOM 操作性能： 频繁的 DOM 操作可能会影响性能。如果需要创建大量的列表项，可以考虑使用文档片段（DocumentFragment）来优化性能。
• 事件委托： 为了提高性能，可以将事件监听器添加到
  元素上，而不是每个
  • 元素上。这称为事件委托。

  总结

  通过调整 DOM 元素的添加顺序，可以轻松地控制动态创建的列表项中删除按钮的位置。结合 CSS 样式调整，可以创建出美观且功能完善的动态列表。在实际开发中，还需要注意性能优化和代码的可维护性。