Question

I’ve tried different solutions now, but I’m not able to remove the correct rows.
Note: In HTML5 it is valid to use numbers in ID.

html

<table>
  <tr id="2"></tr>
  <tr id="5"></tr>
  <tr id="7"></tr>
  <tr id="9"></tr>
</table>

js

var arr = new Array();
arr[0] = '7';
arr[1] = '9';

for(var row_id in arr) {
  $('table tr[id='+row_id+']').remove();
}

The result is always the same – some of my top rows are removed, not the bottom two.
What am I missing in this code?

Update: Here is my fiddle – http://jsfiddle.net/6PkMK/1/

Answer 1

You have two problems. First, you’re using the key instead of array[key]. Let me do a quick demo…

var array = ["a", "b", "c"];

for (var i in array)
{
    console.log(i); //0, 1, 2
    console.log(array[i]); //"a", "b", "c"
}

You get the picture, right? The second problem is that you’re, I think, using the selector variable in a wrong way. In Jquery, when you want to select an element with and id, you do it like this: $(#id), not the way you’re doing it.

Try this:

var arr = new Array();
arr[0] = '7';
arr[1] = '9';

for(var row_id = 0; row_id < arr.length; row_id ++) { //The proper way to iterate
  $('#' + arr[row_id]).remove();
}

Again, if this is false, please let me know in the comments and I’ll remove my answer.