純粋なJavascriptを使用してタスクリストの削除ボタンを取得する

私はタスクリストを作成しています。実際に追加するタスクを削除するために削除ボタンを取得しようとしています。まだまだかなり新しいものです。何か助けていただければ幸いです。純粋なJavascriptを使用してタスクリストの削除ボタンを取得する

は、ここに私のHTMLです：

<body> 
<h1>Start your list!</h1> 
<div class="input"> 
<input type="text" id="task" placeholder="Enter new task."> 
<button id="submit">Create</button> 
</div> 
<section id="list"> 
</section> 
</body>

そしてここでは、これまでのところ、私のjavascriptです：再び

// Creating a new task 
const button = document.getElementById("submit"); 

button.addEventListener("click",() => { 
    var taskInput = document.getElementById("task").value; 
    // Creating the text for list item. 
    if (taskInput === "") { 
    // Prevents empty list item. 
    alert("You have to type a task!"); 
    } else { 
    var listItem = document.createElement("li"); // Create li element. 
    var task = document.createElement("p"); // Create p element. 
    var text = document.createTextNode(taskInput); // Create text for list item. 
    task.appendChild(text); // Append text to p element. 
    listItem.appendChild(task); // Append p to list item. 
    } 


    // Create a delete button 
    var deleteButton = document.createElement("button"); 
    deleteButton.innerHTML = "Delete"; 
    deleteButton.setAttribute("class", "btn delete"); 



    //Create an edit button 
    var editButton = document.createElement("button"); 
    editButton.innerHTML = "Edit"; 
    editButton.setAttribute("class", "btn edit"); 
    editButton.setAttribute("onclick", "editThis(this)"); 

    //Create button section 
    var buttons = document.createElement("div"); 
    buttons.setAttribute("class", "buttons"); 
    buttons.appendChild(editButton); 
    buttons.appendChild(deleteButton); 
    listItem.appendChild(buttons); 

    //Add new list item to list 
    var list = document.getElementById("list"); 
    list.appendChild(listItem); 
}); 

// Delete List Item 
const removeItem = document.getElementsByClassName('delete'); 
removeItem.addEventListener("click", "removeThis(removeItem)"); 

function removeThis(removeItem) { 
    var parent = removeItem.parentElement.parentElement; 
    parent.parentElement.removeChild(parent); 
}

、何かアドバイスに感謝します。

出典

2017-10-03 vortalad

editThis質問でコードで定義されていません。 .addEventListener()の2番目のパラメータは文字列ではなく関数でなければなりません。またremoveItemは、要素のコレクションではなく、単一の要素ボタンを作成しているとして、それは、すぐにリスナーを添付する方が良いでしょう

for (let i = 0; i < removeItem.length; i++) { 
    removeItem[i].addEventListener("click", function() { 
    removeThis(this) 
    }); 
}

出典

2017-10-03 04:44:36 guest271314

です。コードを見てください

// Creating a new task 
const button = document.getElementById("submit"); 

button.addEventListener("click",() => { 
    var taskInput = document.getElementById("task").value; 
    // Creating the text for list item. 
    if (taskInput === "") { 
    // Prevents empty list item. 
    alert("You have to type a task!"); 
    } else { 
    var listItem = document.createElement("li"); // Create li element. 
    var task = document.createElement("p"); // Create p element. 
    var text = document.createTextNode(taskInput); // Create text for list item. 
    task.appendChild(text); // Append text to p element. 
    listItem.appendChild(task); // Append p to list item. 
    } 


    // Create a delete button 
    var deleteButton = document.createElement("button"); 
    deleteButton.innerHTML = "Delete"; 
    deleteButton.setAttribute("class", "btn delete"); 



    //Create an edit button 
    var editButton = document.createElement("button"); 
    editButton.innerHTML = "Edit"; 
    editButton.setAttribute("class", "btn edit"); 
    editButton.setAttribute("onclick", "editThis(this)"); 

    //Create button section 
    var buttons = document.createElement("div"); 
    buttons.setAttribute("class", "buttons"); 
    buttons.appendChild(editButton); 
    buttons.appendChild(deleteButton); 
    listItem.appendChild(buttons); 

    deleteButton.addEventListener('click', function() { 
    console.log(this); 
    console.log(this.parentElement.parentElement); 
    var parent = this.parentElement.parentElement; 
    parent.parentElement.removeChild(parent); 
    }); 
    //Add new list item to list 
    var list = document.getElementById("list"); 
    list.appendChild(listItem); 
});

出典

2017-10-03 04:50:11 Tapas

純粋なJavascriptを使用してタスクリストの削除ボタンを取得する

答えて

関連する問題