Javascript 待办事项列表应用程序删除函数js_Javascript

Javascript 待办事项列表应用程序删除函数js

javascript

Javascript 待办事项列表应用程序删除函数js,javascript,Javascript,我正试图制定一个非常基本的任务清单。我已经研究并查看了许多示例，但都无济于事。我想做的就是能够单击已添加到我的列表中的项目并将其删除。我不知道如何访问在我的项目中输入的值，或者如何将这些值操纵到函数中函数todoList（）{ 让item=document.getElementById（'todoInput'）。值//从输入框中提取值 let text=document.createTextNode（项）//将输入文本转换为节点让newItem=document.createElement

我正试图制定一个非常基本的任务清单。我已经研究并查看了许多示例，但都无济于事。我想做的就是能够单击已添加到我的列表中的项目并将其删除。我不知道如何访问在我的项目中输入的值，或者如何将这些值操纵到函数中

函数todoList（）{ 让item=document.getElementById（'todoInput'）。值//从输入框中提取值 let text=document.createTextNode（项）//将输入文本转换为节点让newItem=document.createElement（'li'）//创建一个列表 appendChild（text）//追加从输入中输入的任务 document.getElementById（'todoList'）.appendChild（newItem）//将输入的任务追加到列表中 }


待办事项清单
待办事项清单
添加项

下面是一个可能的行动过程。有很多方法可以做到这一点，这里有一个是实用的

我已经为你把它分解了。我还重命名了add函数，以便更清楚地了解它的功能：

<!DOCTYPE html>
<html>

<head>
    <!-- <link rel="stylesheet" type="text/css" href="style.css"> -->
    <title>To do list</title>
    <!-- Put this in your style.css -->
    <style>
        .item {
            color: blue;
        }
    </style>
</head>

<body>
    <h1>To Do List</h1>
    <form id="todoForm">
        <input type="text" id="todoInput">
        <button type="button" onclick="addItem()">Add Item</button>
    </form>
    <ul id="todoList"></ul>
    <!-- <script src="app.js"></script> -->
</body>

</html>

<script>
    function addItem(){
        //get current number of todo Items (for creating the ID)
        const currentNumberOfItems = document.querySelectorAll('.item').length
        console.log(currentNumberOfItems)
        console.log('Research:', document.querySelectorAll('.item'))

        const item = document.getElementById('todoInput').value //pulling value from input box
        const text = document.createTextNode(item) //turning input text into node
        const newItem = document.createElement('li') //creates a list
        newItem.id = currentNumberOfItems //give the new <li> an auto-incrementing id property
        newItem.classList.add('item') //add the item class so we can search for it by class
        //we didn't end up searching by class, but you can find every <li> on the page
        //using console.log(document.querySelectorAll('.item'))
        newItem.appendChild(text) //appends task entered from input
        document.getElementById('todoList').appendChild(newItem) //appends the entered task to the list

        const btn = document.createElement('button') // Create a <button> element
        const t = document.createTextNode('Delete')  // Create a text node
        btn.appendChild(t)                           // Append the text to <button>
        newItem.appendChild(btn)                     // Append <button> into the new <li>

        //we are going to create an event listener on the button
        //this takes 2 parameters
        //first = event type (on click)
        //second = callback function to run when the event is detected
        btn.addEventListener('click', function(event) {
            console.log(event.target.parentNode) //we want the element in which the button exists
            console.log('Research:', event) //look at all the stuff in here!
            deleteItem(event.target.parentNode) //run our delete function
        })
    }

    //now that we have an event listener and know the parent
    //we just have to find a way to delete the parent
    //we can call the input anything, and it will be a DOM element (event.target.parentNode)
    function deleteItem(parent) {
        console.log(parent.id) //lets check the parent's id

        //we can use element.removeChild() to ditch the todo item
        //first, we have to get the <ul> somehow
        const todoList = document.getElementById('todoList') //let's get the <ul> by ID
        todoList.removeChild(parent) //cya later "parent that the button was inside of"
    }
</script>

请注意现在使用

let

（将代码替换为该代码）的行为：

这是一些“不变性”的基础知识，当你想阅读时，你应该研究一下。这意味着当你不小心变异了一些变量时，你不必担心那么多奇怪的错误

const

如果你尝试，就会发疯

更高级的是，在使用

const

时，仍然可以重新指定对象的属性：

const object = {
    name: 'Bob Alice'
}
object.name = 'Not Bob Anymore'

当您使用

let

时，它会告诉您自己和其他编码人员，您希望变量的值可能会在代码中附近的某个地方发生变化

我建议你尝试一下，如果你遇到任何问题，只要用谷歌搜索一下，你就会很快发现。别担心，如果你总是使用

const

“除非你做不到”，那么就不会有什么事情发生。问题只会出现在高度高级的代码中，

const

vs.

let

vs.

var

您希望捕获newItem的“onclick”事件。在该事件中，您将有权访问newItem（可能作为事件的属性，因为您没有使用任何像jQuery这样的库）。使用该属性，您可以获得足够的信息来执行“removeChild”。但是还有很多研究要做。。。我的评论应该给你指出正确的方向。谷歌是你的朋友！您可以查看

.addEventListener（'click'

或

.onclick=

部分，例如如何添加click事件

'use strict'
let test = 'cool'
test = 'not cool'
console.log(test)

const object = {
    name: 'Bob Alice'
}
object.name = 'Not Bob Anymore'