如何显示 TODO 列表中的删除按钮

Question

我正在制作一个待办事项列表，并且我有一个功能，当我将鼠标悬停在相应的 Li 上时，它会显示（它增加了不透明度）删除按钮。

  todosUl.addEventListener("mouseover", function(event) {
  var elementHovered = event.target;
  var deleteButton = document.getElementById("deleteButton"+elementHovered.id)
  deleteButton.style.opacity=1;
  });
  todosUl.addEventListener("mouseout", function(event) {
  var elementHovered = event.target;
  var deleteButton = document.getElementById("deleteButton"+elementHovered.id)
  deleteButton.style.opacity = 0;
  });

问题是每当我接近按钮区域时，按钮又消失了。发生这种情况时，控制台会显示：Cannot read 属性 'style' of null

这就是我创建 Li 的方式:

todoLi.appendChild(view.createDeleteButton(position));

createDeleteButton: function (liId) {
    var deleteButton = document.createElement('button');
    deleteButton.textContent = 'X';
    deleteButton.className = 'deleteButton';
    deleteButton.id = 'deleteButton'+liId;
    return deleteButton;

Answer 1

我建议使用 mouseenter 和 mouseleave 而不是 mouseover 和 mouseout 事件。

var todosUl = document.getElementById("todoitem1");
todosUl.addEventListener("mouseenter", function(event) {
  var elementHovered = event.target;
  var deleteButton = document.getElementById("deleteButton"+elementHovered.id)
  deleteButton.style.opacity=1;
  });
  todosUl.addEventListener("mouseleave", function(event) {
  var elementHovered = event.target;
  var deleteButton = document.getElementById("deleteButton"+elementHovered.id)
  deleteButton.style.opacity = 0;
  });

<div id='todoitem1' width='100%' style='background-color: yellow'>
  <button id="deleteButtontodoitem1" style='opacity: 0'>Delete</button>
</div>

Answer 2

您需要 js 进行此渲染有什么特别的原因吗？下面是一个html/css模型

.delete {
  opacity: 0;
}
li:hover > .delete {
  opacity: 1;
}

<ul id="toDos">
  <li>To Do Item 1<input type="button" class="delete" value="Delete"/></li>
  <li>To Do Item 2<input type="button" class="delete" value="Delete"/></li>
  <li>To Do Item 3<input type="button" class="delete" value="Delete"/></li>
  <li>To Do Item 4<input type="button" class="delete" value="Delete"/></li>
</ul>

如何显示 TODO 列表中的删除按钮

How te display delete button from a TODO list

javascript

addeventlistener

onmouseover

todoist