Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

271
Vistas
How can I remove, with the event Onclick, the objects pushed into an array?

For learning purposes I am creating a Todo app in JavaScript. I have a function that takes the input value(Task) and push it to an array of objects.

I want to be able to remove the object task out of the array listOfTask when button delete is clicked and I want to switch the completed property of task to true when button completed is clicked. My problem is that the user can click randomly any object in the array. So I can not link the event click to the object that I want to manipulate using index. Any ideas on how to achieve this will be highly appreciated. By the way, this is my fisrt time posting a question so please let me know if my question needs improvment or clarification.

let listofTask=[];
function addTask(){
 let taskAdded= document.getElementById('input1').value;

 let task=new Object;
 task.task=taskAdded;
 task.completed=false;

 listOfTask.push(task);
 appendTask(listOfTask);
   
}

So the function appendTask() craetes two buttons per each task and print them into the HTML

function appendTask(array){
    
    if(array.length>0){
        
        let div=document.getElementById('show-tasks');
        
        let ul= document.createElement('ul');
        
        let completedButton= document.createElement('input');
        completedButton.value= 'Completed';
        completedButton.type='button';
        completedButton.onclick=function completedTask(){
            this.parentNode.classList.add("mark-completed");
        }
        
        let deleteButton= document.createElement('input');
        deleteButton.value='Delete';
        deleteButton.type='button';
        
        deleteButton.onclick= function deleteTask(){
            this.parentNode.remove();
        }

        ul.innerHTML=ul.innerHTML+`<li>${array[array.length-1].task}</li>
                                     `;

        ul.appendChild(completedButton);
        ul.appendChild(deleteButton);
        div.appendChild(ul)
        

    
}
}

At this point I am able to succesfully mark a task as completed and remove it from the HTML but I want to be able to manipulate the objects inside the array as well. Thank you!

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Always glad to see new developers diving right in!
One way of achieving your desired goal is to give each Object a property id which uniquely identifies it. Then, when clicking the delete-button, you can use the Array function findIndex to find the element to remove.

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda