CODEWITHSUNDEEP
javascripthtmljquerycssdom
allenmor
allenmor

Reputation: 25

Trying to remove the whole table row html javascript

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>

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.

Upvotes: 0

Views: 35

Answers (1)

trincot
trincot

Reputation: 350310

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>' + '$' + 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 = '';
}
<!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>

Upvotes: 4

Related Questions