使用JavaScript从表中删除_Javascript

使用JavaScript从表中删除

javascript

使用JavaScript从表中删除,javascript,Javascript,所以我有一个费用跟踪网站，它只是一个初学者JavaScript项目。我在删除行时遇到问题。如果我单击“删除”按钮，它总是删除标题下的第一行，而不是删除我要删除的行。 HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" conten

所以我有一个费用跟踪网站，它只是一个初学者JavaScript项目。我在删除行时遇到问题。如果我单击“删除”按钮，它总是删除标题下的第一行，而不是删除我要删除的行。
HTML代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <script
      src="https://kit.fontawesome.com/60cb322ae0.js"
      crossorigin="anonymous"
    ></script>
    <title>Expense Tracker</title>
  </head>
  <body>
    <div class="wrapper">
      <h1>Expense Tracker</h1>
      <form action="">
        <label for="">Name</label>
        <input
          class="name"
          type="text"
          placeholder="Where was the expense made"
        /><br />
        <label for="">Date</label>
        <input class="date" type="date" />
        <label for="">Amount</label>
        <input class="amount" type="number" /><br />
        <button class="btn" type="submit">Add Expense</button>
      </form>
    </div>
    <table>
      <tr>
        <th>Name</th>
        <th>Date</th>
        <th>Amount</th>
        <th></th>
      </tr>
    </table>
    <script src="index.js"></script>
  </body>
</html>

const name = document.querySelector(".name");
const date = document.querySelector(".date");
const amount = document.querySelector(".amount");
const btton = document.querySelector(".btn");
const table = document.querySelector("table");
//Event
btton.addEventListener("click", toTable);
table.addEventListener("click", toDelete);
//fucntion

function toTable(event) {
  event.preventDefault();
  //creating table row
  const tableRow = table.insertRow();
  //creating table definitions
  const tableName = tableRow.insertCell();
  const tableDate = tableRow.insertCell();
  const tableAmount = tableRow.insertCell();
  const tableDelete = tableRow.insertCell();
  tableDelete.classList.add("trash");
  //assigning values
  tableName.innerHTML = name.value;
  tableDate.innerHTML = date.value;
  tableAmount.innerHTML = amount.value;
  tableDelete.innerHTML = "<i class='far fa-trash-alt'></i>";
  //making the input fields clear
  name.value = "";
  date.value = "";
  amount.value = "";
}

function toDelete(event) {
  var item = document.querySelector(".trash");
  item = item.parentElement;
  item.remove();
}


开支追踪器
开支追踪器
名称


日期
数量


增加费用
名称
日期
数量

JavaScript代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <script
      src="https://kit.fontawesome.com/60cb322ae0.js"
      crossorigin="anonymous"
    ></script>
    <title>Expense Tracker</title>
  </head>
  <body>
    <div class="wrapper">
      <h1>Expense Tracker</h1>
      <form action="">
        <label for="">Name</label>
        <input
          class="name"
          type="text"
          placeholder="Where was the expense made"
        /><br />
        <label for="">Date</label>
        <input class="date" type="date" />
        <label for="">Amount</label>
        <input class="amount" type="number" /><br />
        <button class="btn" type="submit">Add Expense</button>
      </form>
    </div>
    <table>
      <tr>
        <th>Name</th>
        <th>Date</th>
        <th>Amount</th>
        <th></th>
      </tr>
    </table>
    <script src="index.js"></script>
  </body>
</html>

const name = document.querySelector(".name");
const date = document.querySelector(".date");
const amount = document.querySelector(".amount");
const btton = document.querySelector(".btn");
const table = document.querySelector("table");
//Event
btton.addEventListener("click", toTable);
table.addEventListener("click", toDelete);
//fucntion

function toTable(event) {
  event.preventDefault();
  //creating table row
  const tableRow = table.insertRow();
  //creating table definitions
  const tableName = tableRow.insertCell();
  const tableDate = tableRow.insertCell();
  const tableAmount = tableRow.insertCell();
  const tableDelete = tableRow.insertCell();
  tableDelete.classList.add("trash");
  //assigning values
  tableName.innerHTML = name.value;
  tableDate.innerHTML = date.value;
  tableAmount.innerHTML = amount.value;
  tableDelete.innerHTML = "<i class='far fa-trash-alt'></i>";
  //making the input fields clear
  name.value = "";
  date.value = "";
  amount.value = "";
}

function toDelete(event) {
  var item = document.querySelector(".trash");
  item = item.parentElement;
  item.remove();
}

const name=document.querySelector（“.name”）；
const date=document.querySelector（“.date”）；
常量金额=document.querySelector（“.amount”）；
const btton=document.querySelector（“.btn”）；
const table=document.querySelector（“表”）；
//事件
btton.addEventListener（“点击”，可编辑）；
表.addEventListener（“单击”，删除）；
//功能
可转换函数（事件）{
event.preventDefault（）；
//创建表行
const tableRow=table.insertRow（）；
//创建表定义
const tableName=tableRow.insertCell（）；
const tableDate=tableRow.insertCell（）；
const tableAmount=tableRow.insertCell（）；
const tableDelete=tableRow.insertCell（）；
tableDelete.classList.add（“垃圾”）；
//赋值
tableName.innerHTML=name.value；
tableDate.innerHTML=date.value；
tableAmount.innerHTML=amount.value；
tableDelete.innerHTML=“”；
//使输入字段清晰
name.value=“”；
date.value=“”；
amount.value=“”；
}
函数toDelete（事件）{
变量项=document.querySelector（“.trash”）；
item=item.parentElement；
项。删除（）；
}

很抱歉，代码太乱了，我刚开始编码。

当您执行

document.querySelector（“.trash”）

时，它将获取页面上第一个包含trash类的元素。这就是第一行被删除的原因

您可能应该做的是从您获得的事件中搜索parentElements类。大概是这样的：

function toDelete(event) {
  let row=event.target.closest(".parents-class");
  row.remove();
}

event.target

将为您提供事件调度对象的引用。在您的例子中，这可能是单击的元素。从那里，我们尝试将DOM向上移动到要删除的父级，然后将其删除

或者，您可以搜索最接近的

tr

标记，并以这种方式直接删除它：

function toDelete(event) {
  let row=event.target.closest("tr");
  row.remove();
}