JS element qui ne se place pas correctement

Jonathan Podvin
Javascript

Bonjour !

Depuis hier j'essaie de créer une nouvelle ligne dans ma TodoList avec JS et la création de la ligne se fait correctement sauf pour mon icone "poubelle" (qui est un icone font awesome), celui ci va se mettre dans la première ligne alors que j'ai bien un selecteur de ma ma div en "last-child". Quelqu'un serait il m'expliquer pourquoi tout se place correctement sauf pour l'icone (et pourtant il y a bien un span conteneur qui se créé au bonne endroit)

lien du codepen : https://codepen.io/Jonathan_Design/pen/OJwqXrO

const newTodoDivRaw = document.createElement('div');
const newTodoInputCheck = document.createElement('input');
newTodoInputCheck.setAttribute("type", "checkbox");
const newTodoInputText = document.createElement('input');
newTodoInputText.setAttribute("type", "text");
newTodoInputText.setAttribute("placeholder", "Add a task ...");
const newTodoSpanTrash = document.createElement('span');
const iconTrash = document.createElement('i');
iconTrash.className = 'fa fa-trash';

newTodoDivRaw.classList.add('todolist__list__raw');
const todoList = document.querySelector(".todolist__list");
todoList.appendChild(newTodoDivRaw);
const todoRaw = document.querySelector(".todolist__list__raw:last-child");
newTodoInputCheck.classList.add('todolist__list__raw__checkbox');
todoRaw.appendChild(newTodoInputCheck);
newTodoInputText.classList.add('todolist__list__raw__text');
todoRaw.appendChild(newTodoInputText);
newTodoSpanTrash.classList.add('todolist__list__raw__trash');
const todoTrash = document.querySelector(".todolist__list__raw__trash");
todoRaw.appendChild(newTodoSpanTrash);
todoTrash.appendChild(iconTrash);

Merci
Jonathan

4 réponses

Vhorn

Salut,
Tu ne peux pas faire un document.querySelector sur un élement qui n'est pas encore dans le DOM. Il faut inverser les lignes :

const todoTrash = document.querySelector(".todolist__list__raw__trash");

et

todoRaw.appendChild(newTodoSpanTrash);

Jonathan Podvin
Auteur

Du coup merci, j'ai finallement regler le problème je n'arrivais pas correctement sélectionner mon "span" pour cela il m'a fallu mettre : 

newTodoSpanTrash.classList.add('todolist__list__raw__trash');
todoRaw.appendChild(newTodoSpanTrash);
const todoTrash = document.querySelector(".todolist__list__raw:last-child .todolist__list__raw__trash");
todoTrash.appendChild(iconTrash);

Cependant je n'arrive pas à querySelector un élément que j'ai ajouté de façon dynamique dans mon code ... pas facile les débuts en JS :)

Vhorn

Tu peux te passer des queryselector et utiliser les variables que tu as défini avant. Exemple :
Au lieu d'utiliser 

    const todoTrash = document.querySelector(".todolist__list__raw:last-child .todolist__list__raw__trash");
    todoTrash.appendChild(iconTrash);

tu peux directement utiliser :

    newTodoSpanTrash.appendChild(iconTrash);
Jonathan Podvin
Auteur

Franchement merci beaucoup pour ce petit tips ! :)

SI je peux me permettre une dernière question, car vraiment, je ne trouve pas la solution et je suis bloqué dans la suppression de mes lignes, serais tu comment je peux selectionné un élément que j'ai ajouter de facon dynamique ? je suis incapable de querySelector une des poubelles (newTodoSpanTrash), j'ai essayé :

const todoDelete = document.querySelector(".todolist__list__raw__trash, newTodoSpanTrash");

 todoDelete.addEventListener('click', function(){
 console.log(this);
 })

Mais cela ne fonctionne pas

merci encore pour ton aide !