CODEWITHSUNDEEP
javascripthtmlasp.net-mvc-4
Clement Branzuela GRANE
Clement Branzuela GRANE

Reputation: 23

How to delete rows in html table by using a parameter in javascript

How I can delete rows in HTML table by using a parameter. In this example, I want to delete all the row that contains "Rock" in Data 1. "Rock" will be the parameter. I'm using mvc4.

<input type="text" id="tpcName" class="inputBox">

<table id="myTable">
  <thead>
    <tr>
      <th style="width: 50px;"></th>
      <th style="width: 50px;">Data 1</th>
      <th style="width: 50px;">Data 2</th>
      <th style="width: 50px;">Data 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td>Rock</td>
      <td>Soil</td>
      <td>Sand</td>
    </tr>
    <tr>
      <td></td>
      <td>Rain</td>
      <td>Water</td>
      <td>Sea</td>
    </tr>
    <tr>
      <td></td>
      <td>Rock</td>
      <td>Soil</td>
      <td>Sand</td>
    </tr>
    <tr>
      <td></td>
      <td>Rock</td>
      <td>Soil</td>
      <td>Sand</td>
    </tr>
  </tbody>
</table>

<button type="button" onclick="myFunction(tpcName.value)"> Delete</button>

Upvotes: 1

Views: 1341

Answers (3)

Rohit Mathur
Rohit Mathur

Reputation: 131

You can loop through your rows inside tbody and check which rows have your specified content, filter out those rows then you can delete it from your dom or you can use some css to hide those rows.

function removeRow(param){
  Array.from(document.querySelectorAll("tbody tr"))
  .filter(row => Array.from(row.children).filter(col => col.innerText == param).length !== 0)
  .forEach(row => document.querySelector("tbody").removeChild(row))
}

Note: If you remove the rows. They cannot be restored back. You will have to create new nodes. If your program needs to get them back then you must use CSS to hide your rows.

Upvotes: 1

W-B
W-B

Reputation: 1297

in plain javascript:

document.querySelectorAll('tr').forEach(tr => {
    if(tr.children[1].textContent ==="Rock"){
        tr.remove()
    }
});

first we query all of the tags and loop over them to see if their first children have the text "Rock" if so delete the

Suggestion 0

for the td that you want to check for a value, give it a class. This makes it easy to write clean and faster(though not noticeably) code.

like so

  <tbody>
    <tr>
      <td></td>
      <td class="first_col">Rock</td>
      <td>Soil</td>
      <td>Sand</td>
    </tr>
      <td></td>
      <td class="first_col">Rock</td>
      <td>Soil</td>
      <td>Sand</td>
    </tr>
    <tr>
  </tbody>

document.querySelectorAll('#myTable >* .first_col').forEach(td => {
    if(td.textContent ==="Rock"){
        td.parentNode.remove()
    }
})

Suggestion 1

To tune/change this, it's useful to learn how to use querySelectorAll and querySelector

Upvotes: 1

Shnigi
Shnigi

Reputation: 1002

You don't describe what you have tried already. But for example:

const rows = Array.from(document.getElementsByTagName('TD'));
rows.forEach(rowItem => {
  if (rowItem.innerHTML === 'Rock') {
    rowItem.remove();
  }
})

Find all the table cell elements. Then loop through and delete the item if it contains your text in the innerHTML. Here is a pen: https://codepen.io/shnigi/pen/qBOQbvb

also note that the remove method isn't supported in Internet Explorer.

Upvotes: 1

Related Questions