时间戳

首页 > 解决方案 > 使用 javascript 将图像添加到列表中，然后在单击图像时删除该列表项

javascript - 使用 javascript 将图像添加到列表中，然后在单击图像时删除该列表项

问题描述

首先，我知道通过在 HTML 中创建 ul 可以使事情变得更容易。我不应该那样做。

我的 HTML：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body id="body">
    <form  id="form" >
      <input id="userInput" placeholder="Enter your list item here">
      <button type="button"  onclick="inputFunction()">Add</button>
    </form>
    <script src="A4.js"></script>
  </body>
</html>

到目前为止我的Javascript：

// Creating Array
var listData = ["Crab","Lobster","Scallops"];
// Creating initial List
function listFunction(){
  var ul = document.createElement("ul");
  ul.id = 'ulId';

  document.getElementById('body').appendChild(ul);
  listData.forEach(liFunction);

  function liFunction(element){
    var li = document.createElement('li');
    ul.appendChild(li);
    li.innerHTML+=element;
  }
}
listFunction();

// Adding user input to the list
function inputFunction() {
  var input = document.getElementById("userInput").value;
  listData.push(input);
  var newLi = document.createElement("li");
  document.getElementById('ulId').appendChild(newLi);
  newLi.innerHTML=input;
}



var liImg = document.getElementsByTagName('li');
for (var i = 0; i < liImg.length; i++) {
  liImg[i].addEventListener('mouseover', handlerFunction, false);
}


function handlerFunction(e) {
  var img = document.createElement("img");
  img.setAttribute("src","https://cdn1.iconfinder.com/data/icons/nuove/128x128/actions/fileclose.png");
  img.setAttribute("height","10");
  img.setAttribute("width", "10");
  document.getElementsByTagName('li').innerHTML += "img";
}

所以我应该做的是首先使用 listData 数组创建一个列表，并将其显示在页面上。然后我接受用户输入并将其添加到列表中。这部分工作正常

我坚持的部分是在鼠标悬停时必须在每个列表项旁边创建/显示图像。如果单击图像，则必须删除该特定列表项。我已经创建了 eventListener，但 img 部分似乎没有工作。

标签： javascripthtmldom-events

解决方案

img不是字符串，它是一个变量，因此请从中删除周围的双引号。由于img是一个节点元素，而不是使用innerHTML你应该使用appendChild(). 您还应该使用 e.target 来引用特定的 li 元素：

改变：

document.getElementsByTagName('li').innerHTML += "img";

至

e.target.appendChild(img);

我会建议你使用mouseenter而不是mousemove. 我认为您还需要附加该mouseleave事件。您还必须将事件附加到新创建的li元素。

试试下面的方法：

// Creating Array
var listData = ["Crab","Lobster","Scallops"];
// Creating initial List
function listFunction(){
  var ul = document.createElement("ul");
  ul.id = 'ulId';

  document.getElementById('body').appendChild(ul);
  listData.forEach(liFunction);

  function liFunction(element){
    var li = document.createElement('li');
    ul.appendChild(li);
    li.innerHTML+=element;
  }
}
listFunction();

// Adding user input to the list
function inputFunction() {
  var input = document.getElementById("userInput").value;
  listData.push(input);
  var newLi = document.createElement("li");
  newLi.addEventListener('mouseenter', handlerFunction, false);
  newLi.addEventListener('mouseleave', removeImage, false);
  document.getElementById('ulId').appendChild(newLi);
  newLi.insertAdjacentHTML('beforeend', input);
}



var liImg = document.getElementsByTagName('li');
for (let i = 0; i < liImg.length; i++) {
  liImg[i].addEventListener('mouseenter', handlerFunction, false);
  liImg[i].addEventListener('mouseleave', removeImage, false);
}


function handlerFunction(e) {
  var img = document.createElement("img");
  img.setAttribute("src","https://cdn1.iconfinder.com/data/icons/nuove/128x128/actions/fileclose.png");
  img.setAttribute("height","30");
  img.setAttribute("width", "30");
  img.addEventListener('click', function(){
    this.closest('li').remove();
  });
  e.target.appendChild(img);
}
function removeImage(e){
  e.target.querySelector('img').remove();
}
<body id="body">
  <form  id="form" >
    <input id="userInput" placeholder="Enter your list item here">
    <button type="button"  onclick="inputFunction()">Add</button>
  </form>
  <script src="A4.js"></script>
</body>

推荐阅读