CODEWITHSUNDEEP
javascripticons
Saiprakash Reddy
Saiprakash Reddy

Reputation: 19

Why my delete icon is not being displayed when created using javascript

It's a basic todoList app Im creating..Please help me with this the delete icon is not visible .

HTML file

<!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

In the below file i tried to add a span tag using creatElement which inturn contains with a trash element .But its not showing when i run live server..Please help

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

Upvotes: 2

Views: 849

Answers (2)

Masoud Aghaei
Masoud Aghaei

Reputation: 804

you have to add

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

at the end of <head> tag.

you can use another version from here

or get the latest version from fontawesome official website

Upvotes: 0

Mamun
Mamun

Reputation: 68933

You are missing the font awesome link:

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

font awesome class should be fa fa-trash. Also you can use closest() to find the respective li element to remove using 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>

Upvotes: 1

Related Questions