使用 addEventlistener 修改对象

Question

I have an array of objects which looks like this:

 0: {name: "a", id: 0, trash: false} 1: {name: "b", id: 1, trash: false} 2: {name: "c", id: 2, trash: false} 3: {name: "d", id: 3, trash: false} 4: {name: "e", id: 4, trash: false} 5: {name: "f", id: 5, trash: false}

and I wrote this code to change the value trash from true to false everytime I click.

 list.addEventListener("click", (e) => { if (e.target.classList.contains("delete")) { e.target.parentElement.remove(); console.log((listTodo[2].trash = true)); console.log(listTodo); } });

I know that writing in this way i's only going to chance the value of the specific object(in this case the object in the position 2).

So, what I'm trying to do is dig into the clicked object and change the value.

here is a snippet of the HTML part of the code to give an idea.

 <li class="list-group-item d-flex justify-content-between align-items-center"> <span>lorem1234</span><i class="far fa-trash-alt delete" job="delete" id=5></i> </li>

Answer 1

I would suggest you use data-* attributes which are easy to read with getAttribute (or data() if you happen to use jQuery).

Then you can just read the job and id easily enough and convert the latter to an index of the array of listTodo .

 var listTodo = [{name: "a", id: 0, trash: false}, {name: "b", id: 1, trash: false}, {name: "c", id: 2, trash: false}]; var list = document.querySelector("#my-list"); list.addEventListener("click", (e) => { if (e.target.getAttribute("data-job") == "delete") { e.target.parentElement.remove(); var idx = parseInt(e.target.getAttribute("data-id"),10); console.log((listTodo[idx].trash = true)); console.log(listTodo); } });

 <script src="https://kit.fontawesome.com/a076d05399.js"></script> <ul id="my-list"> <li class="list-group-item d-flex justify-content-between align-items-center"> <span>lorem1</span><i class="far fa-trash-alt delete" data-job="delete" data-id="0"></i> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <span>lorem2</span><i class="far fa-trash-alt delete" data-job="delete" data-id="1"></i> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <span>lorem3</span><i class="far fa-trash-alt delete" data-job="delete" data-id="2"></i> </li> </ul>

Answer 2

You should use data attribute data-job as others have said, then you can do this with 3 steps in your javascript click handler.

• 1: check the clicked element has has the data-job="delete" . This is easy to do using the dataset attribute if (e.target.dataset.job == "delete")
• 2: Remove it from the DOM e.target.parentElement.remove();
• 3: Change the "trash" value in your array. You get the id of the clicked element e.target.id and use it as the array key: listTodo[e.target.id].trash = true;

That's all. The javascript function is next, then a snippet below that showing it working.

var list = document.getElementById("list");
list.addEventListener("click", (e) => {

    // Check if the clicked element has the data-job="delete"
    if (e.target && e.target.dataset.job == "delete") {

        // Remove the element from the DOM
        e.target.parentElement.remove();

        // set trash to true for this element in the array using this id as the array key
        listTodo[e.target.id].trash = true;
  }
});

 var listTodo = { 0: {name: "a", id: 0, trash: false}, 1: {name: "b", id: 1, trash: false}, 2: {name: "c", id: 2, trash: false}, 3: {name: "d", id: 3, trash: false}, 4: {name: "e", id: 4, trash: false}, 5: {name: "f", id: 5, trash: false} }; var list = document.getElementById("list"); list.addEventListener("click", (e) => { // check if the clicked element has the data-job="delete" if (e.target && e.target.dataset.job == "delete") { // Remove the clicked element from the DOM e.target.parentElement.remove(); // Set trash=true for the clicked element using the id as the array key listTodo[e.target.id].trash = true; console.log ("Deleting element "+e.target.id); } });

 i { display: block; height: 20px; width: 20px; margin-left: 10px;}

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" rel="stylesheet" /> <ul id="list"> <li class="list-group-item d-flex justify-content-between align-items-center"> <span>0</span><i class="far fa-trash-alt delete" data-job="delete" id="0"></i> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <span>1</span><i class="far fa-trash-alt delete" data-job="delete" id="1"></i> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <span>2</span><i class="far fa-trash-alt delete" data-job="delete" id="2"></i> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <span>3</span><i class="far fa-trash-alt delete" data-job="delete" id="3"></i> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <span>4</span><i class="far fa-trash-alt delete" data-job="delete" id="4"></i> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <span>5</span><i class="far fa-trash-alt delete" data-job="delete" id="5"></i> </li> </ul>