行動の可能性が高いコースです。あなたがそれをやることができる多くの方法があります、ここでは機能的です。
私はあなたのためにそれを壊しました。私もそれが何をするか、もう少し明確にするアドイン機能と改名：
<!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>
私はこのスニペット作ってみましたが、あなたが削除すると、それがコードエディタがクラッシュするようですので、私はこのようにそれを残します。
ボーナス
それは、JavaScriptとあなたはそれが設定されると、その変数を変更する予定はありません、他のプログラマーに伝え再割り当てを、許可していないので、あなたは、私がconst代わりのletを使用し表示されます。
あなたのJSファイルでこれを入れていることをサンプリングすることができます
app.js
'use strict'
const test = 'cool'
test = 'not cool'
console.log(test)
お知らせ今letと行動（このためのコードを入れ替える）：
'use strict'
let test = 'cool'
test = 'not cool'
console.log(test)
を
読書をしたいときにちょっと研究しなければならない "不変性"を持つこの基本的なこと。誤って変数を変更すると、奇妙なバグで心配する必要はありません。試してみるとconstが怒ってしまいます。 constを使用した場合
より高度な、あなたはまだ、オブジェクトのプロパティアサインを再することができます：あなたはletを使用する場合、それは自分自身とあなたが変数の値はおそらくどこかに変更されます期待し、他のプログラマーに伝え
const object = {
name: 'Bob Alice'
}
object.name = 'Not Bob Anymore'
コードの近くにあります。
私はこれを試してみることをお勧めします。問題が発生した場合は、Googleだけですぐに見つけられます。心配する必要はありません。あなたがいつも「const」を使用しているのであれば、何も吹き飛ばされません。問題は、const対let対varの高度なコードでのみ発生します。
newItemの "onclick"イベントをトラップします。このイベントでは、newItemにアクセスできます（jQueryなどのライブラリを使用していないため、おそらくイベントのプロパティとして扱います）。このプロパティを使用すると、「removeChild」を実行するのに十分な情報を取得できます。しかし、そこに到達するための多くの研究があります...私のコメントは正しい方向にあなたを指摘する必要があります。 Googleはあなたの友人です！ – theGleep
「.addEventListener（ 'click''または '.onclick ='の部分をクリックすると、クリックイベントを追加する方法などがわかります。https://www.w3schools.com/howto/howto_js_todolist.asp – Slai