尝试删除整个表行HTML JavaScript

发布于 2025-02-09 18:48:55 字数 2322 浏览 1 评论 0原文

javascript

function takeOut(el) {
el.parentElement.remove();
}

document.getElementById('myButton').onclick = function () {
const name = document.getElementById('name').value;
const date = document.getElementById('date').value;
const amount = document.getElementById('amount').value;
const nameTd = '<td>' + name + '</td>';
const dateTd = '<td>' + date + '</td>';
const amountTd = '<td>' + '$'+ amount + '</td>' + '<td>' + 
'<button id="removeBtn"type="button" onClick="takeOut(this)">X</button></td>';
const tr = '<tr>' + nameTd + dateTd +  amountTd + '</tr>';
document.getElementById('table').insertAdjacentHTML('beforeend', tr);
document.getElementById('clearList').onclick = function () {
    const cl = document.getElementById('table');
    while (cl.hasChildNodes()) {
        cl.removeChild(cl.firstChild);
    }
}
document.getElementById('name').value = '';
document.getElementById('amount').value = '';
document.getElementById('date').value = '';
}

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Expense Tracker</title>
</head>
<body>
<h1>Expense Tracker</h1>
<h3>Add A New Item:</h3>
<label>Name: <input text="text" id="name"></label><br>
<label>Date:<input type="date" id="date"></label><br>
<label>Amount:<input text="text" id="amount"></label><br>
<button type="button" id="myButton">Add Expense</button>
<button type="button" id="clearList">Clear List</button>
<br>
<br>
<br>
<br>
<br>
<table border="1">
    <tr>
        <th>Name</th>
        <th>Date</th>
        <th>Amount</th>
        <th>Remove</th>
    </tr>
    <tbody  id="table">

    </tbody>
</table>


<script src="script2.js"></script>
</body>
</html>

嘿，所以我试图用x删除其在用户输入的整个元素中的按钮，然后将其输入费用后，他们可以删除该元素。每次我单击按钮时，它只会删除实际按钮而不是整个输入。

原文

JAVASCRIPT

function takeOut(el) {
el.parentElement.remove();
}

document.getElementById('myButton').onclick = function () {
const name = document.getElementById('name').value;
const date = document.getElementById('date').value;
const amount = document.getElementById('amount').value;
const nameTd = '<td>' + name + '</td>';
const dateTd = '<td>' + date + '</td>';
const amountTd = '<td>' + '
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Expense Tracker</title>
</head>
<body>
<h1>Expense Tracker</h1>
<h3>Add A New Item:</h3>
<label>Name: <input text="text" id="name"></label><br>
<label>Date:<input type="date" id="date"></label><br>
<label>Amount:<input text="text" id="amount"></label><br>
<button type="button" id="myButton">Add Expense</button>
<button type="button" id="clearList">Clear List</button>
<br>
<br>
<br>
<br>
<br>
<table border="1">
    <tr>
        <th>Name</th>
        <th>Date</th>
        <th>Amount</th>
        <th>Remove</th>
    </tr>
    <tbody  id="table">

    </tbody>
</table>


<script src="script2.js"></script>
</body>
</html>

Hey so im trying to make the button with the x remove the whole  element that its in so after the user inputs the expense they can remove that certain one. Everytime I click the button it only removes the actual button not the whole input.
+ amount + '</td>' + '<td>' + 
'<button id="removeBtn"type="button" onClick="takeOut(this)">X</button></td>';
const tr = '<tr>' + nameTd + dateTd +  amountTd + '</tr>';
document.getElementById('table').insertAdjacentHTML('beforeend', tr);
document.getElementById('clearList').onclick = function () {
    const cl = document.getElementById('table');
    while (cl.hasChildNodes()) {
        cl.removeChild(cl.firstChild);
    }
}
document.getElementById('name').value = '';
document.getElementById('amount').value = '';
document.getElementById('date').value = '';
}

HTML

Hey so im trying to make the button with the x remove the whole element that its in so after the user inputs the expense they can remove that certain one. Everytime I click the button it only removes the actual button not the whole input.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

绮筵 2025-02-16 18:48:56

它实际上删除了具有按钮的父元素。但这是td元素。您想删除 grand parent，所以要做：

el.parentElement.parentElement.remove();

仅查找最近的tr元素（在祖先元素中）可能会更容易：

el.closest("tr").remove();

function takeOut(el) {
  el.closest("tr").remove();
}

document.getElementById('myButton').onclick = function() {
  const name = document.getElementById('name').value;
  const date = document.getElementById('date').value;
  const amount = document.getElementById('amount').value;
  const nameTd = '<td>' + name + '</td>';
  const dateTd = '<td>' + date + '</td>';
  const amountTd = '<td>' + '
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Expense Tracker</title>
</head>

<body>
  <h1>Expense Tracker</h1>
  <h3>Add A New Item:</h3>
  <label>Name: <input text="text" id="name"></label><br>
  <label>Date:<input type="date" id="date"></label><br>
  <label>Amount:<input text="text" id="amount"></label><br>
  <button type="button" id="myButton">Add Expense</button>
  <button type="button" id="clearList">Clear List</button>
  <br>
  <br>
  <br>
  <br>
  <br>
  <table border="1">
    <tr>
      <th>Name</th>
      <th>Date</th>
      <th>Amount</th>
      <th>Remove</th>
    </tr>
    <tbody id="table">

    </tbody>
  </table>


  <script src="script2.js"></script>
</body>

</html>

 + amount + '</td>' + '<td>' +
    '<button id="removeBtn"type="button" onClick="takeOut(this)">X</button></td>';
  const tr = '<tr>' + nameTd + dateTd + amountTd + '</tr>';
  document.getElementById('table').insertAdjacentHTML('beforeend', tr);
  document.getElementById('clearList').onclick = function() {
    const cl = document.getElementById('table');
    while (cl.hasChildNodes()) {
      cl.removeChild(cl.firstChild);
    }
  }
  document.getElementById('name').value = '';
  document.getElementById('amount').value = '';
  document.getElementById('date').value = '';
}

It actually removes the parent element that has the button. But that is a td element. You want to delete the grandparent, so do:

el.parentElement.parentElement.remove();

It may be easier to just look for the closest tr element (among the ancestor elements):

el.closest("tr").remove();

function takeOut(el) {
  el.closest("tr").remove();
}

document.getElementById('myButton').onclick = function() {
  const name = document.getElementById('name').value;
  const date = document.getElementById('date').value;
  const amount = document.getElementById('amount').value;
  const nameTd = '<td>' + name + '</td>';
  const dateTd = '<td>' + date + '</td>';
  const amountTd = '<td>' + '
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Expense Tracker</title>
</head>

<body>
  <h1>Expense Tracker</h1>
  <h3>Add A New Item:</h3>
  <label>Name: <input text="text" id="name"></label><br>
  <label>Date:<input type="date" id="date"></label><br>
  <label>Amount:<input text="text" id="amount"></label><br>
  <button type="button" id="myButton">Add Expense</button>
  <button type="button" id="clearList">Clear List</button>
  <br>
  <br>
  <br>
  <br>
  <br>
  <table border="1">
    <tr>
      <th>Name</th>
      <th>Date</th>
      <th>Amount</th>
      <th>Remove</th>
    </tr>
    <tbody id="table">

    </tbody>
  </table>


  <script src="script2.js"></script>
</body>

</html>

 + amount + '</td>' + '<td>' +
    '<button id="removeBtn"type="button" onClick="takeOut(this)">X</button></td>';
  const tr = '<tr>' + nameTd + dateTd + amountTd + '</tr>';
  document.getElementById('table').insertAdjacentHTML('beforeend', tr);
  document.getElementById('clearList').onclick = function() {
    const cl = document.getElementById('table');
    while (cl.hasChildNodes()) {
      cl.removeChild(cl.firstChild);
    }
  }
  document.getElementById('name').value = '';
  document.getElementById('amount').value = '';
  document.getElementById('date').value = '';
}

回复收藏 0 原文

~没有更多了~