JS element qui ne se place pas correctement

Par Jonathan Podvin, il y a 3 ans

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, il y a 3 ans

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, il y a 3 ans

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, il y a 3 ans

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, il y a 3 ans

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 !