为什么使用 javascript 创建时不显示我的删除图标

Question

这是我正在创建的基本 todoList 应用程序。请帮我解决这个问题，删除图标不可见。

HTML 文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>TodoList</title>
  </head>
  <body>
    <div class="app_container">
      <header>
        <h2>Todo List</h2>
      </header>
      <main>
        <input
          onkeydown="if(event.keyCode==13){ todoList(); return false;} "
          type="text"
          placeholder="Enter your task..."
        />
        <ul class="list">
          <!--All your todos go here-->
        </ul>
      </main>
    </div>
    <script src="index.js"></script>
  </body>
</html>

索引.js

在下面的文件中，我尝试使用 creatElement 添加一个跨度标签，该标签又包含带有垃圾元素。但是当我运行实时服务器时它没有显示出来。请帮忙

function todoList() {

    const list = document.querySelector('.list');
    const input = document.querySelector('input');
    const newTask = document.createElement('li');
    const span = document.createElement('span');

    span.innerHTML = '<i class="fas fa-trash"></i>';

    if (input.value !== "") {
        newTask.textContent = input.value;
        input.value = "";
        list.appendChild(newTask);
        newTask.appendChild(span);
    }

    span.addEventListener('click', function () {
        const parent = this.parentNode;
        parent.removeChild();
    })



    newTask.addEventListener('click', () => {
        newTask.classList.toggle('completed');
    });
}

Answer 1

您缺少字体真棒链接：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

字体真棒 class 应该是fa fa-trash 。 您也可以使用closest()来查找要使用remove()删除的相应li元素。

 function todoList() { const list = document.querySelector('.list'); const input = document.querySelector('input'); const newTask = document.createElement('li'); const span = document.createElement('span'); span.innerHTML = '<i class="fa fa-trash"></i>'; if (input.value.== "") { newTask.textContent = input;value. input;value = "". list;appendChild(newTask). newTask;appendChild(span). } span,addEventListener('click'. function () { this.closest('li');remove(). }) newTask,addEventListener('click'. () => { newTask.classList;toggle('completed'); }); }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <link rel="stylesheet" href="style:css" /> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <title>TodoList</title> </head> <body> <div class="app_container"> <header> <h2>Todo List</h2> </header> <main> <input onkeydown="if(event;keyCode==13){ todoList(); return false.} " type="text" placeholder="Enter your task..." /> <ul class="list"> <!--All your todos go here--> </ul> </main> </div> <script src="index.js"></script> </body> </html>

Answer 2

你必须添加

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />

在<head>标签的末尾。

你可以从这里使用另一个版本

或从fontawesome官网获取最新版本

为什么使用 javascript 创建时不显示我的删除图标

问题描述

2 个解决方案

解决方案1
0 2021-01-24 05:13:08

解决方案2
0 2021-01-24 06:35:45

为什么使用 javascript 创建时不显示我的删除图标

问题描述

2 个解决方案

解决方案1 0 2021-01-24 05:13:08

解决方案2 0 2021-01-24 06:35:45

解决方案1
0 2021-01-24 05:13:08

解决方案2
0 2021-01-24 06:35:45