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

Question

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>

var table = document.getElementById('tableId'); for (var r = 1, n = table.rows.length; r < n; r++) { alert(table.rows[r].cells[0].innerHTML); } I only tried showing the value of Data1 — Clement Branzuela GRANE
– Clement Branzuela GRANE, Commented May 18, 2020 at 5:35

Shnigi · Accepted Answer · 2020-05-18 05:46:52Z

1

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.

answered May 18, 2020 at 5:46

Shnigi

1,01010 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

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

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered May 18, 2020 at 5:47

W-B

1,2978 silver badges21 bronze badges

8 Comments

fengxh Over a year ago

domCollection is an array-like structure, so here you can not use forEach. You must invert the domCollection to array structure first.

W-B Over a year ago

@fengxh querySelectorAll returns a nodeList which has a forEach() function

fengxh Over a year ago

oh it's my fault, sorry

Clement Branzuela GRANE Over a year ago

I forgot to include the table id. Sorry Can you edit it so that the only table with the same id will be affected. Thanks

Clement Branzuela GRANE Over a year ago

Can it be used in mvc4? I am having an error on it.

|

Rohit Mathur · Accepted Answer · 2020-05-18 08:18:45Z

1

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.

edited May 18, 2020 at 8:18

answered May 18, 2020 at 5:48

Rohit Mathur

1312 silver badges7 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Suggestion 0

Suggestion 1

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Suggestion 0

Suggestion 1

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related