How to remove elements from an array of objects

Question

In a todo app I'm making, I want to remove the completed tasks by clicking on a button.

This is what I have in my body:

  <div id="div-todo"></div>
  <button id="hide-todo">Hide completed</button>

  <script src="script.js"></script>
</body>

And this is my js code:

const todos = [
    {
        text: 'Learn HTML',
        completed: true
    },{
        text: 'Learn CSS',
        completed: true
    },{
        text: 'Learn Javascript',
        completed: false
    },{
        text: 'Learn Nodejs',
        completed: false
    },{
        text: 'Learn SQL',
        completed: false
    }
]

// renderring and printing tasks
const renderTodo = function (todos) {
    const incompletedTodo = todos.filter(function (todo) {
        return !todo.completed
    })

    //printing the h2 tag that containe the number of incompleted task
    const summery = document.createElement('h2')
    summery.textContent = `You have ${incompletedTodo.length} todos left. `
    document.querySelector('#div-todo').appendChild(summery)

    //printting all of tasks
    todos.forEach(function (todo) {
        const p = document.createElement('p')
        p.textContent = todo.text
        document.querySelector('#div-todo').appendChild(p)
    })

    // button setting
    document.querySelector('#hide-todo').addEventListener('click',function (e) {
        const completedTodo = todos.filter(function (todo) {
            return todo.completed
        })
        e.target.textContent = 'Completed task is hide'

        console.log(completedTodo)
    })
}
renderTodo(todos)

I want to hide uncompleted task with a button, I even log the completedTodo variable, but I don't know how to remove them (I am new to JS).

What you're trying to do is https://stackoverflow.com/questions/10024866/remove-object-from-array-using-javascript — phaberest, Mar 27 '19 at 16:29

score 0 · Answer 1 · answered Mar 27 '19 at 12:56

The problem is that there is no 'real' connection between the objects in your todos array and the actual html elements. So though a task might be flagged as completed you don't know what paragraph element is displaying the task. To make a connection, get all child elements of the parent element holding all your paragraphs (div-todo), check if it's text matches the text in your todos array and ultimately remove the whole paragraph element if the task is flagged as completed.

  document.querySelector('#hide-todo').addEventListener('click', function(e) {
    const completedTodo = todos.filter(function(todo) {
      return todo.completed
    })
    e.target.textContent = 'Completed task is hide'
    var myChild = document.getElementById("div-todo").childNodes;
    for (var a = 0; a < myChild.length; a++) {
      for (var b = 0; b < completedTodo.length; b++) {
        if (myChild[a].textContent == completedTodo[b].text) {
          myChild[a].parentNode.removeChild(myChild[a]);
        }
      }
    }
  })

score 0 · Answer 2 · answered Mar 27 '19 at 12:58

Just assing incompleted task in to do.

const todos = [{
text: 'Learn HTML',
completed: true
},{
    text: 'Learn CSS',
    completed: true
},{
    text: 'Learn Javascript',
    completed: false
},{
    text: 'Learn Nodejs',
    completed: false
},{
    text: 'Learn SQL',
    completed: false
}]
// renderring and printing tasks
const renderTodo = function(todos){
const incompletedTodo = todos.filter(function (todo) {
    return !todo.completed
})


//printing the h2 tag that containe the number of incompleted task
const summery = document.createElement('h2')
summery.textContent = `You have ${incompletedTodo.length} todos left. `
document.querySelector('#div-todo').appendChild(summery)
//printting all of tasks
todos.forEach(function (todo) {
    const p = document.createElement('p')
    p.textContent = todo.text
    document.querySelector('#div-todo').appendChild(p)
})
// button setting
document.querySelector('#hide-todo').addEventListener('click',function           (e){
    const completedTodo = todos.filter(function (todo) {
        return todo.completed
    })
    e.target.textContent = 'Completed task is hide'
    
    $('#div-todo').html('');
    incompletedTodo.forEach(function (todo) {
        const p = document.createElement('p')
        p.textContent = todo.text
        document.querySelector('#div-todo').appendChild(p)
    })

    console.log(completedTodo)
})
}
renderTodo(todos)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div id="div-todo"></div>
<button id="hide-todo">Hide completed</button>

<script src="script.js"></script>
</body>

How to remove elements from an array of objects

2 Answers2