Question

I am trying to hide an input box if the preceding input box’s value is the same e.g.

City     Id    Name

NY        1     James
NY        2     John
TOKYO     3     Jane
TOKYO     4     June

I want to hide the second NY and the second TOKYO (NB:only the city, the Id and Name should remain).

I am using the jQuery script below:

<script>

$(function(){

var tr_no = $('.city').length;

for(i=1; i<=tr_no; i++)  {

    if($(".city:eq("+i+")").val() == $(".city:eq("+i+++")").val()){

        $(".city:eq("+i+1+")").css({'display':'none'});

        }

    }


});

</script>

It is not working. Firebug Console does not return any errors. Any help on how to continue this on jQuery will much appreciated.

Answer 1

For organized output: http://jsfiddle.net/mattblancarte/mnWH2/10/

var tr = $( 'tr' ),
    duplicates = [];

tr.each( function( k,v ){
  var elem = $( v ),
      child = elem.children().slice(0,1),
      city = child.text();

  if( $.inArray( city, duplicates ) > 0 ){
    child.empty();    
  } else {
    duplicates.push( city );
  }
});

For unorganized output: http://jsfiddle.net/mattblancarte/mnWH2/8/

$( 'tr' ).each( function( k,v ){
  var elem = $( v ),
      prev = elem.prev().children().slice(0,1).text(),
      child = elem.children().slice(0,1),
      city = child.text();

  if( prev === city ){
    child.empty();    
  } 
});

​

Note:: I don’t think you want to use display:none;. This may shift the table around… Maybe visibility:hidden would be a better option. I just empty the cell.