Question

在我正在制作的待办事项应用程序中，我想通过单击按钮来删除已完成的任务。

这是我的body中的内容：

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

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

这是我的js代码：

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)

我想用按钮隐藏未完成的任务，甚至记录completedTodo变量，但我不知道如何删除它们（我是JS新手）。

Answer 1

问题在于 todos 数组中的对象与实际的html元素之间没有“真实”连接。因此，尽管可能将某项任务标记为已完成，但您不知道哪个段落元素正在显示该任务。要建立连接，请获取包含所有段落的父元素的所有子元素（div-todo），检查其文本是否与todos数组中的文本匹配，如果任务被标记为已完成，则最终删除整个段落元素。 / p>

  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]);
        }
      }
    }
  })

Answer 2

只需完成待完成的任务即可。

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>

如何从对象数组中删除元素

2 个答案: