jQuery Add class to dynamically generated element with click, but only on one of them and click on another, remove from the other elements

Question

Hello, good evening friends, all good? I am studying and developing an All list,after adding an item(<li>) my <ol>, created an eventListener so that when you click on one of the items on the list, it will receive the class .selected, however, all items receive the class, not only the clicked, the worst, is that as I stuck to it, I am not able to proceed to implement the continuation, whether it would be by clicking on another item, it receive the class .selected while the last clicked would lose it.

As I am new in programming and mainly in jQuery, I am banging head here trying to understand how it would work to achieve the desired result, someone could give me a light by kindness?

Jsfiddle -> https://jsfiddle.net/ruqwgeh2/

Js:

// ADICIONA UM NOVO ITEM
$("#criar-tarefa").click(function () {
  if ($("#texto-tarefa").val() === "") {
    alert("Você deve digitar algo para ser adicionado a lista!");
  } else {
    $("#lista-tarefas").append(
      `<li class="item-lista">${$("#texto-tarefa").val()}</li>`
    );
    $("#texto-tarefa").val("");
  }
});

$("#lista-tarefas").on("click", "li", function () {
  $("li").addClass("selected");
});

// REMOVE OS FINALIZADOS
$("#remover-finalizados").click(function () {
  $(".completed").remove();
});

// TODO: SALVAR TAREFAS WEBSTORAGE
// $('#salvar-tarefas').click(function () {
// });

// REMOVE OS SELECIONADOS
$("#remover-selecionado").click(function () {
  $(".selected").remove();
});

// APAGA TUDO
$("#apaga-tudo").click(function () {
  $("#lista-tarefas").empty();
});

Answer 1

It’s Arthur, all right...

Let’s look at your code:

$("#lista-tarefas").on("click", "li", function () {
  $("li").addClass("selected");
});

This part of the code means the following: Select all elements li who are children of the ID task list and listen to the event of click of each and when one of these elements is clicked, add the class Selected in all elements li.

So the code is doing just that, always when you click on an element li it will add the class Selected in all the li page.

Let’s change the first premise to the following: Listen to the click event of all elements li that is inside the element that has the ID task list and when one of them is clicked, add the class Selected only the item that was clicked. So we have the following:

$("#lista-tarefas").on("click", "li", function (e) {
  $(e.target).addClass("selected");
});

The function being passed as the third parameter is a callback and it takes a parameter, an object that has information about the event being fired. One such information is the target (target) that is, the element that when being clicked triggered the function.

You can learn more about the click Event this link about your API on the Mozilla website clicking here.

So in this case one of your problems is solved.

Next is the following: You would like that all other elements li except the clicked has the class Selected removed.

So before we assign the class Selected at the li clicked, we can remove the class of all elements that has it.

For example:

  $('.selected').removeClass("selected");

Then the complete solution would be like this:

$("#lista-tarefas").on("click", "li", function (e) {
  $('.selected').removeClass("selected");
  $(e.target).addClass("selected");
});