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

首先你必须用 from openpyxl import load_workbook import pandas as pd wb = load_workbook(r'Data.xlsx') ws = wb['workload'] data = [] for row in ws: if ws.row_dimensions[row[0].row].hidden == False: row_values = [cell.value for cell in row] data.append(row_values) df = pd.DataFrame(data[1:], columns=data[0]) print(df) 关闭你的 JS 中的每一行，然后只要你选择了多个元素，你就需要定义你需要与你的 JS 一起使用的按钮只要你为所有按钮设置相同的语句，所以我使用 ; 来选择所有按钮并用于循环所有结果，试试这个片段。祝你好运实现你的目标。

querySelectorAll()

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 = "";
}

Answer 2

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

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

您可以运行代码段并检查

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>

希望这有帮助

按钮功能干扰输入功能

2 个答案: