Is this an efficient way to remove a table row from a table body?

user_6288485 0
Viewed 36

I'm new to coding and I was wondering if there are more simple ways to traverse the DOM, get what elements I need and delete a row when clicked. If possible, I would greatly prefer these answers to be done in Vanilla JavaScript, for I am currently trying to truly understand the syntax of this language.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <title></title>
  </head>
  <body>
    <h1>Lets do this</h1>
    <table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody id="body1">
    <tr data-row="row" class="rows">
      <th scope="srow">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr data-row="row" class="rows">
      <th scope="row">2 </th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr data-row="row" class="rows">
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
    </tr>
  </tbody>
</table>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<script type="text/javascript">


   let body = document.getElementById('body1')
   let trs = document.querySelectorAll('tr')
   for(let i = 0; i < trs.length; i++){
     trs[i].addEventListener('click', function(event){
       body.removeChild(trs[i])
     })
   }



</script>
</body>
</html>
dom html javascript
3 Answers

Here's another way, using .remove(), it's a bit more concise:

for (const tr of document.querySelectorAll('#body1 tr')) {
  tr.addEventListener('click', () => tr.remove());
}
<h1>Lets do this</h1>
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody id="body1">
    <tr data-row="row" class="rows">
      <th scope="srow">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr data-row="row" class="rows">
      <th scope="row">2 </th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr data-row="row" class="rows">
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
    </tr>
  </tbody>
</table>

user_110812140

You could use event delegation to avoid adding an event on each tr. For example:

let body = document.getElementById('body1');

body.addEventListener('click', evt => {
  if (evt.target.parentNode.tagName = 'TR') {
    body.removeChild(evt.target.parentNode);
  }
});

This makes the assumption that there aren't any children inside your tds, which may not be the case later on. If you have children, you'll have find the parent tr, in which case it may not be as efficient if you have to loop.

user_6703960

u can try this https://jsfiddle.net/m92ehp5k/

let tableRef = document.getElementById('body1');
tableRef.addEventListener('click', function(event){
  event.target.parentNode.remove();
;})
user_25762540
Related