JavaScript 待办事项列表 - 删除按钮仅出现在最近添加的项目上

Question

我开始学习 JavaScript，并想开始一个项目来测试自己。经典的待办事项列表项目。

我创建了一个函数，它基本上提取输入框中的任何文本，并使用该文本创建一个新的列表项。但是，删除按钮只出现在列表中最近的项目上。

我可以通过在函数中嵌套 [var deleteButton = document.createElement('button');]（第 4 行）来解决此问题，但是当我这样做时，删除按钮不再起作用！

任何帮助都将不胜感激。 （另外，我知道它还不是移动响应的，我计划在确定功能后处理所有这些）。

代码：

$(document).ready(function() {
  var submitButton = $('#taskEntryButton');
  var taskEntry = $('#taskEntryField');
  var deleteButton = document.createElement('button');


  function submitFunction() {
    // get the input value and put it into a variable
    var newTaskContent = $('#taskEntryField').val();
    // create a new list item
    var newListItem = document.createElement('li');
    // create a new checkbox for the new list item
    var newCheckbox = document.createElement('INPUT');
    newCheckbox.setAttribute('type', 'checkbox');
    newListItem.appendChild(newCheckbox);
    newCheckbox.setAttribute('class', '.activeCheckBox');
    // create a new 'label' in the list item
    var label = document.createElement('label');
    label.innerText = newTaskContent;
    newCheckbox.after(label);
    // create a new div for the delete button
    var buttonHolder = document.createElement('div');
    buttonHolder.setAttribute('class', '.newButtonHolder');
    label.after(buttonHolder);
    // create the delete button
    deleteButton.setAttribute('class', '.delete');
    deleteButton.innerText = "Delete";
    buttonHolder.appendChild(deleteButton);
    // insert the new list item into the list (at the top)
    $('#activeTaskList').prepend(newListItem);
    // reset text box
    taskEntry.val("");
  };

  submitButton.click(submitFunction);

  // make function execute on enter
  taskEntry.keypress(function(event) {
    if (event.keyCode === 13) {
      // Cancel the default action, if needed
      event.preventDefault();
      submitFunction();
      // reset text box
      taskEntry.val("");
    }
  });

  // set up the delete button
  deleteButton.addEventListener("click", deleteItem);
  //delete function
  function deleteItem() {
    // grab list item (button -> div -> li)
    let item = this.parentNode.parentNode;
    // here i select the ul
    let parent = item.parentNode;
    //remove li from ul
    parent.removeChild(item);
  };

  // here i make the 2 tab buttons show the relevent tab
  var activeTabButton = document.getElementById('activeButton');
  var completedTabButton = document.getElementById('completedButton');
  var activeTab = document.getElementById('activeTasks');
  var completedTab = document.getElementById('completedTasks');

  activeTabButton.addEventListener("click", function() {
    if (activeTab.style.display !== "block") {
      activeTab.style.display = "block";
      completedTab.style.display = "none";
    };
  });

  completedTabButton.addEventListener("click", function() {
    if (completedTab.style.display !== "block") {
      completedTab.style.display = "block";
      activeTab.style.display = "none";
    };
  });


});

* {
  font-family: 'Karla', sans-serif;
}

body {
  background-color: rgb(226, 217, 198);
}

.wrapper {
  width: 100%;
  height: 100vh;
  display: flex;
}

#container {
  background-color: #ffe8aa;
  width: 30%;
  height: 650px;
  margin-left: auto;
  margin-right: auto;
  align-self: center;
  border-radius: 20px;
}

#header {
  height: 170px;
  background-color: rgb(255, 189, 113);
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 20px 20px 0px 0px;
}

.tabsButton {
  font-size: 1.2em;
  width: 150px;
  text-align: center;
  border-style: none;
  margin-left: 10px;
  margin-right: 10px;
}

#taskEntryContainer {
  margin-top: auto;
  margin-bottom: auto;
  display: flex;
}

#taskEntryField {
  font-size: 1.2em;
}

#taskEntryButton {
  margin-left: 50px;
  font-size: 1.2em;
}


/* Task Lists */

#mainSection {
  width: 100%;
}

#toDoListContainer {
  width: 100%;
  overflow: hidden;
  border-radius: 0px 0px 20px 20px;
}

.taskList {
  width: 100%;
  list-style: none;
  font-size: 1.5em;
}

.taskList li {
  width: 86%;
  display: flex;
  align-items: baseline;
  padding: 2%;
  box-sizing: border-box;
  border-radius: 10px;
  margin-bottom: 20px;
  background-color: #ffc038;
}

.taskList li label {
  margin-left: 30px;
  width: 75%;
}

.taskList button {
  border-style: none;
  background-color: #494949;
  font-size: 0.7em;
  color: white;
}


/* Active Tasks */

#activeTasks {
  display: block;
  z-index: 3;
}


/* Completed Tasks */

#completedTasks {
  display: none;
  z-index: 3;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>To Do List</title>
  <link href="styles.css" rel="stylesheet">
  <script src="../jquery-3.5.1.js"></script>
  <script src="scripts.js"></script>

  <!-- Google Fonts -->
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Karla&display=swap" rel="stylesheet">

</head>

<body>
  <div class="wrapper">
    <div id="container">
      <div id="header">
        <div id="toDoTabs">
          <button class="tabsButton" id="activeButton">Active</button>
          <button class="tabsButton" id="completedButton">Completed</button>
        </div>
        <div id="taskEntryContainer">
          <input type="text" id="taskEntryField" input="" placeholder="Enter a new task...">
          <button id="taskEntryButton">Submit</button>
        </div>
      </div>
      <div id="mainSection">
        <div id="toDoListContainer">
          <div id="activeTasks">
            <ul class="taskList" id="activeTaskList">
            </ul>
          </div>
          <div id="completedTasks">
            <ul class="taskList" id="completedTaskList">
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Answer 1

您确实应该在提交函数内创建按钮，然后将点击事件处理程序添加到该按钮（也在提交函数内）。因为您只创建了一次按钮，所以每次将该按钮附加到某个元素时，它只会“移动”该元素。

$(document).ready(function() {
      var submitButton = $('#taskEntryButton');
      var taskEntry = $('#taskEntryField');


      function submitFunction() {
        // get the input value and put it into a variable
        var newTaskContent = $('#taskEntryField').val();
        // create a new list item
        var newListItem = document.createElement('li');
        // create a new checkbox for the new list item
        var newCheckbox = document.createElement('INPUT');
        newCheckbox.setAttribute('type', 'checkbox');
        newListItem.appendChild(newCheckbox);
        newCheckbox.setAttribute('class', '.activeCheckBox');
        // create a new 'label' in the list item
        var label = document.createElement('label');
        label.innerText = newTaskContent;
        newCheckbox.after(label);
        // create a new div for the delete button
        var buttonHolder = document.createElement('div');
        buttonHolder.setAttribute('class', '.newButtonHolder');
        /**
        * NOTE HERE!!!
        **/
        var deleteButton = document.createElement("button");
        // set up the delete button
        deleteButton.addEventListener("click", deleteItem);
          //delete function
          function deleteItem() {
          // grab list item (button -> div -> li)
          let item = this.parentNode.parentNode;
          // here i select the ul
          let parent = item.parentNode;
          //remove li from ul
          parent.removeChild(item);
        };
        
        label.after(buttonHolder);
        // create the delete button
        deleteButton.setAttribute('class', '.delete');
        deleteButton.innerText = "Delete";
        buttonHolder.appendChild(deleteButton);
        // insert the new list item into the list (at the top)
        $('#activeTaskList').prepend(newListItem);
        // reset text box
        taskEntry.val("");
      };

      submitButton.click(submitFunction);

      // make function execute on enter
      taskEntry.keypress(function(event) {
        if (event.keyCode === 13) {
          // Cancel the default action, if needed
          event.preventDefault();
          submitFunction();
          // reset text box
          taskEntry.val("");
        }
      });

      

      // here i make the 2 tab buttons show the relevent tab
      var activeTabButton = document.getElementById('activeButton');
      var completedTabButton = document.getElementById('completedButton');
      var activeTab = document.getElementById('activeTasks');
      var completedTab = document.getElementById('completedTasks');

      activeTabButton.addEventListener("click", function() {
        if (activeTab.style.display !== "block") {
          activeTab.style.display = "block";
          completedTab.style.display = "none";
        };
      });

      completedTabButton.addEventListener("click", function() {
        if (completedTab.style.display !== "block") {
          completedTab.style.display = "block";
          activeTab.style.display = "none";
        };
      });


    });

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
  <div class="wrapper">
    <div id="container">
      <div id="header">
        <div id="toDoTabs">
          <button class="tabsButton" id="activeButton">Active</button>
          <button class="tabsButton" id="completedButton">Completed</button>
        </div>
        <div id="taskEntryContainer">
          <input type="text" id="taskEntryField" input="" placeholder="Enter a new task...">
          <button id="taskEntryButton">Submit</button>
        </div>
      </div>
      <div id="mainSection">
        <div id="toDoListContainer">
          <div id="activeTasks">
            <ul class="taskList" id="activeTaskList">
            </ul>
          </div>
          <div id="completedTasks">
            <ul class="taskList" id="completedTaskList">
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Answer 2

您在 submitFunction 函数之外创建按钮并越来越多地使用它。

移动这一行：

var deleteButton = document.createElement('button');

之后：

// create the delete button

并且，紧接着也移动事件监听器：

deleteButton.addEventListener("click", deleteItem);

另一种解决方案是在 submitFunction 中使用以下方法创建按钮的克隆：

Node.cloneNode(): 纯javascript

.clone(): 使用 jQuery

sn-p：

$(document).ready(function() {
    var submitButton = $('#taskEntryButton');
    var taskEntry = $('#taskEntryField');



    function submitFunction() {
        // get the input value and put it into a variable
        var newTaskContent = $('#taskEntryField').val();
        // create a new list item
        var newListItem = document.createElement('li');
        // create a new checkbox for the new list item
        var newCheckbox = document.createElement('INPUT');
        newCheckbox.setAttribute('type', 'checkbox');
        newListItem.appendChild(newCheckbox);
        newCheckbox.setAttribute('class', '.activeCheckBox');
        // create a new 'label' in the list item
        var label = document.createElement('label');
        label.innerText = newTaskContent;
        newCheckbox.after(label);
        // create a new div for the delete button
        var buttonHolder = document.createElement('div');
        buttonHolder.setAttribute('class', '.newButtonHolder');
        label.after(buttonHolder);
        // create the delete button
        var deleteButton = document.createElement('button');  // MOVE HERE
        // set up the delete button
        deleteButton.addEventListener("click", deleteItem);
        
        deleteButton.setAttribute('class', '.delete');
        deleteButton.innerText = "Delete";
        buttonHolder.appendChild(deleteButton);
        // insert the new list item into the list (at the top)
        $('#activeTaskList').prepend(newListItem);
        // reset text box
        taskEntry.val("");
    };

    submitButton.click(submitFunction);

    // make function execute on enter
    taskEntry.keypress(function(event) {
        if (event.keyCode === 13) {
            // Cancel the default action, if needed
            event.preventDefault();
            submitFunction();
            // reset text box
            taskEntry.val("");
        }
    });

    
    //delete function
    function deleteItem() {
        // grab list item (button -> div -> li)
        let item = this.parentNode.parentNode;
        // here i select the ul
        let parent = item.parentNode;
        //remove li from ul
        parent.removeChild(item);
    };

    // here i make the 2 tab buttons show the relevent tab
    var activeTabButton = document.getElementById('activeButton');
    var completedTabButton = document.getElementById('completedButton');
    var activeTab = document.getElementById('activeTasks');
    var completedTab = document.getElementById('completedTasks');

    activeTabButton.addEventListener("click", function() {
        if (activeTab.style.display !== "block") {
            activeTab.style.display = "block";
            completedTab.style.display = "none";
        };
    });

    completedTabButton.addEventListener("click", function() {
        if (completedTab.style.display !== "block") {
            completedTab.style.display = "block";
            activeTab.style.display = "none";
        };
    });


});

* {
    font-family: 'Karla', sans-serif;
}

body {
    background-color: rgb(226, 217, 198);
}

.wrapper {
    width: 100%;
    height: 100vh;
    display: flex;
}

#container {
    background-color: #ffe8aa;
    width: 30%;
    height: 650px;
    margin-left: auto;
    margin-right: auto;
    align-self: center;
    border-radius: 20px;
}

#header {
    height: 170px;
    background-color: rgb(255, 189, 113);
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 20px 20px 0px 0px;
}

.tabsButton {
    font-size: 1.2em;
    width: 150px;
    text-align: center;
    border-style: none;
    margin-left: 10px;
    margin-right: 10px;
}

#taskEntryContainer {
    margin-top: auto;
    margin-bottom: auto;
    display: flex;
}

#taskEntryField {
    font-size: 1.2em;
}

#taskEntryButton {
    margin-left: 50px;
    font-size: 1.2em;
}


/* Task Lists */

#mainSection {
    width: 100%;
}

#toDoListContainer {
    width: 100%;
    overflow: hidden;
    border-radius: 0px 0px 20px 20px;
}

.taskList {
    width: 100%;
    list-style: none;
    font-size: 1.5em;
}

.taskList li {
    width: 86%;
    display: flex;
    align-items: baseline;
    padding: 2%;
    box-sizing: border-box;
    border-radius: 10px;
    margin-bottom: 20px;
    background-color: #ffc038;
}

.taskList li label {
    margin-left: 30px;
    width: 75%;
}

.taskList button {
    border-style: none;
    background-color: #494949;
    font-size: 0.7em;
    color: white;
}


/* Active Tasks */

#activeTasks {
    display: block;
    z-index: 3;
}


/* Completed Tasks */

#completedTasks {
    display: none;
    z-index: 3;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Karla&display=swap" rel="stylesheet">
<div class="wrapper">
    <div id="container">
        <div id="header">
            <div id="toDoTabs">
                <button class="tabsButton" id="activeButton">Active</button>
                <button class="tabsButton" id="completedButton">Completed</button>
            </div>
            <div id="taskEntryContainer">
                <input type="text" id="taskEntryField" input="" placeholder="Enter a new task...">
                <button id="taskEntryButton">Submit</button>
            </div>
        </div>
        <div id="mainSection">
            <div id="toDoListContainer">
                <div id="activeTasks">
                    <ul class="taskList" id="activeTaskList">
                    </ul>
                </div>
                <div id="completedTasks">
                    <ul class="taskList" id="completedTaskList">
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>