按键功能干扰输入功能

Question

我正在创建一个可以添加和删除项目的列表。我设法添加了新项目，但是当我向删除按钮添加一个功能时，它会使提交表单失败。在我添加btn.addEventListener("click", runEvent) 之后form.addEventListener("submit", addItem); 停止工作

HTML：

<div class="container">
    <div id="main" class="card card-body">
        <h2 class="title">Add Items</h2>
        <form id="addForm" class="form-inline mb-3">
            <input type="text" class="form-control mr-2" id="item">
            <input type="submit" class="btn btn-dark" value="Submit">
        </form>
        <h2 class="title">Items</h2>
        <ul id="items" class="list-group">
            <li class="list-group-item">Item 1 <button class="btn btn-danger btn-sm float-right delete">X</button></li>
            <li class="list-group-item">Item 2 <button class="btn btn-danger btn-sm float-right delete">X</button></li>
            <li class="list-group-item">Item 3 <button class="btn btn-danger btn-sm float-right delete">X</button></li>
            <li class="list-group-item">Item 4 <button class="btn btn-danger btn-sm float-right delete">X</button></li>
        </ul>
    </div>
</div>

JS：

let form = document.getElementById("addForm")
let itemList = document.getElementById("items")

let btn = document.getElementsByClassName("btn btn-danger btn-sm float-right delete")

btn.addEventListener("click", runEvent)

function runEvent(event){

    event.preventDefault()
    console.log("hi")
}

// Form submit event
form.addEventListener("submit", addItem);

// Add item
function addItem(e){

    e.preventDefault()
    console.log(e)

    // Get input value

    let newItem = document.getElementById("item").value

    // Create new li
    let newLI = document.createElement("li")
    // Add class

    newLI.className = "list-group-item"
    // Add text node with input

    newLI.textContent = newItem

    //Delete button

    let button = document.createElement("button")
    button.className = "btn btn-danger btn-sm float-right delete"
    button.textContent = "X"
    newLI.appendChild(button)

    itemList.appendChild(newLI)
    document.getElementById("item").value = ""
}

Answer 1

首先，您必须使用; 关闭 JS 中的每一行，然后只要您选择多个元素，您就需要定义需要与 JS 一起使用的按钮 只要您为所有按钮设置相同的语句，所以我使用querySelectorAll() 选择所有按钮并用于循环所有结果， 试试sn-p。祝你好运实现你的目标。

let form = document.getElementById("addForm");
let itemList = document.getElementById("items");

let btn = document.querySelectorAll(".delete");
for (var i =0; i<btn.length ; i++) {

btn[i].addEventListener("click", function runEvent(event){

    event.preventDefault();
    console.log("hi");
});
}







// Form submit event
form.addEventListener("submit", addItem);

// Add item
function addItem(e){

    e.preventDefault();
    console.log(e);

    // Get input value

    let newItem = document.getElementById("item").value;

    // Create new li
    let newLI = document.createElement("li");
    // Add class

    newLI.className = "list-group-item";
    // Add text node with input

    newLI.textContent = newItem;

    //Delete button

    let button = document.createElement("button");
    button.className = "btn btn-danger btn-sm float-right delete";
    button.textContent = "X";
    newLI.appendChild(button);

    itemList.appendChild(newLI);
    document.getElementById("item").value = "";
}

<div class="container">
   <div id="main" class="card card-body">
    <h2 class="title">Add Items</h2>
    <form id="addForm" class="form-inline mb-3">
      <input type="text" class="form-control mr-2" id="item">
      <input type="submit" class="btn btn-dark" value="Submit">
    </form>
    <h2 class="title">Items</h2>
    <ul id="items" class="list-group">
      <li class="list-group-item">Item 1 <button class="btn btn-danger btn-sm float-right delete">X</button></li>
      <li class="list-group-item">Item 2 <button class="btn btn-danger btn-sm float-right delete">X</button></li>
      <li class="list-group-item">Item 3 <button class="btn btn-danger btn-sm float-right delete">X</button></li>
      <li class="list-group-item">Item 4 <button class="btn btn-danger btn-sm float-right delete">X</button></li>
    </ul>
   </div>

Answer 2

我之前的答案很好，但是当单击添加的新元素的删除按钮时它无法运行功能，这是因为没有将 eventListener 或 onclick 添加到添加元素的按钮。所以我成功了。

我也这样做了，以便在单击删除按钮时删除该项目。

你可以运行sn-p并检查

let form = document.getElementById("addForm");
let itemList = document.getElementById("items");

function runEvent(event) {

  event.preventDefault();
  itemList.removeChild(event.target.parentNode)
};

let btn = document.querySelectorAll(".delete");
for (var i = 0; i < btn.length; i++) {

  btn[i].addEventListener("click", () => runEvent(event));
}







// Form submit event
form.addEventListener("submit", addItem);

// Add item
function addItem(e) {

  e.preventDefault();
  // Get input value

  let newItem = document.getElementById("item").value;

  // Create new li
  let newLI = document.createElement("li");
  // Add class

  newLI.className = "list-group-item";
  // Add text node with input

  newLI.textContent = newItem;

  //Delete button

  let button = document.createElement("button");
  button.className = "btn btn-danger btn-sm float-right delete";
  button.textContent = "X";
  button.addEventListener('click', () => runEvent(event))
  newLI.appendChild(button);

  itemList.appendChild(newLI);
  document.getElementById("item").value = "";
}

<div class="container">
  <div id="main" class="card card-body">
    <h2 class="title">Add Items</h2>
    <form id="addForm" class="form-inline mb-3">
      <input type="text" class="form-control mr-2" id="item">
      <input type="submit" class="btn btn-dark" value="Submit">
    </form>
    <h2 class="title">Items</h2>
    <ul id="items" class="list-group">
      <li class="list-group-item">Item 1 <button class="btn btn-danger btn-sm float-right delete">X</button></li>
      <li class="list-group-item">Item 2 <button class="btn btn-danger btn-sm float-right delete">X</button></li>
      <li class="list-group-item">Item 3 <button class="btn btn-danger btn-sm float-right delete">X</button></li>
      <li class="list-group-item">Item 4 <button class="btn btn-danger btn-sm float-right delete">X</button></li>
    </ul>
  </div>

希望这有帮助