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

【问题标题】：Why my delete icon is not being displayed when created using javascript为什么我的删除图标在使用 javascript 创建时不显示
【发布时间】：2021-04-28 05:28:14
【问题描述】：

这是我正在创建的一个基本的 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>

Index.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');
    });
}

【问题讨论】：

标签： javascript icons

【解决方案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">

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

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>

【讨论】：

【解决方案2】：

你必须添加

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

在<head> 标签的末尾。

你可以使用here的另一个版本

或从fontawesome official website获取最新版本

【讨论】：