选择添加了功能的元素答案

【问题标题】：Select element added with function选择添加了功能的元素
【发布时间】：2023-02-11 03:25:41
【问题描述】：

如果我的英语不是我的母语，首先很抱歉。

我刚开始学习 JS，我正在尝试在 codepen (https://codepen.io/Jonathan_Design/pen/OJwqXrO) 上创建一个基本的待办事项列表，但我被卡住了，因为我不知道如何选择一个用 JS 添加的元素（不是基于文档）。

我试过：

`const trash = document.querySelector('.todolist__list__raw__trash');

trash.addEventListener('点击', function(){ 控制台日志（这个）； })`

但是这个只适用于第一个“原始”，因为这个是在 html 代码库上。

我这样做了，但只使用了 Jquery：

$(document).on('click', '.todolist__list__raw__trash', function() { $(this).parent().remove(); });

但我真的很想在 JS 中学习它:)

谢谢乔纳森

有谁能帮我选择一个用 JS 添加的元素吗？

【问题讨论】：

欢迎来到计算器！ jQuery 是 JS。尝试querySelectorAll选择所有匹配项（而不仅仅是第一个），使用for循环或.forEach检查结果，并为每个匹配项添加一个事件监听器

标签： javascript selector

【解决方案1】：

querySelector() 只选择它在 DOM 中找到的第一个元素。对于多个元素，请使用querySelectorAll()。

在顶部定义 trash 选择器和其他选择器。
创建一个函数来获取垃圾元素列表，并为所有元素分配一个事件侦听器。

将 todoPlus 事件侦听器设为匿名函数，并在其中调用 addRaw() 和新的 cleanTrash() 函数。

现在每次添加新项目时，它都会检查 DOM 中是否有新的垃圾元素，并向其添加事件侦听器。

////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////
// JAVASCRIPT
////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////

  //SELECTEURS
const todoPlus = document.querySelector(".todolist__list__plus");
const todoRaw = document.querySelector(".todolist__list__raw:last-child");
const todoTrash = document.querySelector(".todolist__list__raw:last-child .todolist__list__raw__trash");
const todoList = document.querySelector(".todolist__list");
let trash = document.querySelectorAll('.todolist__list__raw__trash');

  //ECOUTEURS
todoPlus.addEventListener("click", () => {
  addRaw()
  cleanTrash()
});
// const todoList = document.querySelector(".todolist__list");
// todoDelete.addEventListener("click", deleteRaw);

  //FONCTIONS

function addRaw(event){
//   CREATION ELEMENT + CLASSE
  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 ...");
  newTodoInputText.setAttribute("size", "30");
  const newTodoSpanTrash = document.createElement('span');
  const iconTrash = document.createElement('i');
  iconTrash.className = 'fa fa-trash';
// INSERTION DE LA NOUVELLE LIGNE 
  newTodoDivRaw.classList.add('todolist__list__raw');
  todoList.appendChild(newTodoDivRaw);
  newTodoInputCheck.classList.add('todolist__list__raw__checkbox');
  newTodoDivRaw.appendChild(newTodoInputCheck);
  newTodoInputText.classList.add('todolist__list__raw__text');
  newTodoDivRaw.appendChild(newTodoInputText);
  newTodoSpanTrash.classList.add('todolist__list__raw__trash');
  newTodoDivRaw.appendChild(newTodoSpanTrash);
  newTodoSpanTrash.appendChild(iconTrash);
}

  // SUPPRESION DE LA RAW

function cleanTrash() {
  trash = document.querySelectorAll('.todolist__list__raw__trash');
  trash.forEach((t) => {
    t.addEventListener('click', function(){
     console.log(this);
    })
  })
}

【讨论】：