Dynamically delete rows using Javascript. Whats wrong with my code?

Question

The user inputs some text into a form and its stored in a variable 'userInput' I have html table with id="myTable". I want to iterate through the table using Javascript and delete all the rows where the value of the 3rd column in a row isn't equal to the userInput, but my code isn't working for some reason:

var theTable = document.getElementById("myTable");
for(int x = 0; x < theTable.rows.length; x++){
     if(theTable.rows[x].cells[2].innerHTML != userInput){
          theTable.deleteRow(x);
      }
}

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

3

The first issue with this code that I see is that you are deleting rows in a forward moving loop, meaning if you delete row 3, row 4 will now be 3 etc (not an issue if only deleting a single row but not a good practice).. You should delete in reverse ordered loop.

Also, you should probably compare the `innerText` vs `innerHTML`, I doubt the user input is HTML.

for(var x = theTable.rows.length; x > 0 ; x--){
  if(theTable.rows[x - 1].cells[2].innerText!= userInput){
      theTable.deleteRow(x -1);
  }
}

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Mar 11, 2015 at 13:11

T McKeown

12.9k1 gold badge27 silver badges35 bronze badges

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

1 Comment

swenzel Over a year ago

Also content of the cells might be formatted? E.g. <b>asdf</b> != asdf

Rias · Accepted Answer · 2015-03-11 13:22:36Z

In your for loop you need to change int x to var x to be valid in javascript.
To make sure, that every line is deleted, to only count up the iterator x, if a row was not deleted. (see the else statement)

var userInput = 'keep me';

var theTable = document.getElementById("myTable");
for(var x = 0; x < theTable.rows.length;){
  if(theTable.rows[x].cells[2].innerHTML != userInput){
    theTable.deleteRow(x);
  } else {
    x += 1;
  }
}

<table id="myTable">
  <tr>
    <td>text</td>
    <td>text</td>
    <td>keep me</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
    <td>delete me</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
    <td>delete me</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
    <td>delete me</td>
  </tr>
</table>

Alexis Peters · Accepted Answer · 2015-03-11 13:11:51Z

0

try logging the outputs:

var theTable = document.getElementById("myTable");
for(int x = 0; x < theTable.rows.length; x++){
     console.log(theTable.rows[x].cells[2].innerHTML , userInput);
     if(theTable.rows[x].cells[2].innerHTML != userInput){
          theTable.deleteRow(x);
      }
}

answered Mar 11, 2015 at 13:11

Alexis Peters

1,6511 gold badge11 silver badges17 bronze badges

Collectives™ on Stack Overflow

Dynamically delete rows using Javascript. Whats wrong with my code?

3 Answers 3

Also, you should probably compare the `innerText` vs `innerHTML`, I doubt the user input is HTML.

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Also, you should probably compare the innerText vs innerHTML, I doubt the user input is HTML.

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related

Also, you should probably compare the `innerText` vs `innerHTML`, I doubt the user input is HTML.