if input field has a value found in array, do this (jQuery/Javascript)

Question

I've got a page with a handful of input fields.

I need to find the fields with an array of values, and if so, .remove() the closest('tr')

The markup is similar to this

<table>
  <tr>
    <td>
      <input type="text" value="this">
    </td>
  </tr>
  <tr>
    <td>
      <input type="text" value="that">
    </td>
  </tr>
  <tr>
    <td>
      <input type="text" value="them">
    </td>
  </tr>
</table>

I need to find "this" and "that", and if they are there, remove their <tr> container (and themselves) so I'd end up with:

<table>
  <tr>
    <td>
      <input type="text" value="them">
    </td>
  </tr>
</table>

I've tried this:

jQuery(document).ready(function($){
    var badfields = ['this', 'that'];
    var fieldvalue = $('input[type="text"]').val();

    if($.inArray(fieldvalue, badfields) > -1){
        $(this).closest('tr').remove();   
    }
});

but it doesn't seem to want to work?

Xymostech · Accepted Answer · 2013-01-25 20:52:06Z

2

You need to iterate over all the fields using .each, so something like this:

$('input[type="text"]').each(function() {
    var fieldvalue = $(this).val();

    if ($.inArray(fieldvalue, badfields) > -1) {
        $(this).closest('tr').remove();   
    }
});

Example: jsfiddle

answered Jan 25, 2013 at 20:52

Xymostech

9,8803 gold badges36 silver badges45 bronze badges

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

3 Comments

Josh E Over a year ago

why not use .parent("tr") instead of .closest? .parent conveys greater intention IMO

Xymostech Over a year ago

@JoshE Because I tried to edit the OP's code as little as possible to make it work. You're correct, .parent does convey greater intention, but I'd rather not confuse anybody by changing too much at once.

Xhynk Over a year ago

I ended up using .parent() - for some reason I though only closest could traverse up more than 1 element. Other than that, it works beautifully! Thanks :)

Josh E · Accepted Answer · 2013-01-25 21:01:50Z

1

You can be very concise sometimes with jQuery. jQuery has content selectors you can use for this type of purpose:

$("input[type=text][value=this], [value=that]").parents("tr").remove();

since you don't necessarily know this or that beforehand, you can do something like this:

var badfields = ['this', 'that'];
$(badfields).each(function(i) { 
    $("input[type=text][value=" + this + "]").parents("tr").remove();
});

edited Jan 25, 2013 at 21:01

answered Jan 25, 2013 at 20:54

Josh E

7,4522 gold badges34 silver badges45 bronze badges

1 Comment

Xymostech Over a year ago

This works if you know the values beforehand, or want to generate the selector string yourself, but isn't so great for more general solutions...

Travis J · Accepted Answer · 2013-01-25 20:54:53Z

0

You can use each to iterate through the selector. this in your inArray scope is not the element you were looking for.

DEMO: http://jsfiddle.net/

html:

<table>
 <tr>
  <td>
  <input type="text" value="this">
  </td>
 </tr>
 <tr>
  <td>
   <input type="text" value="that">
  </td>
 </tr>
 <tr>
  <td>
   <input type="text" value="them">
  </td>
 </tr>
</table>

js:

jQuery(document).ready(function($){
 var badfields = ['this', 'that'];
    $('input[type="text"]').each(function(){
        if( $.inArray(this.value, badfields) > -1 ){
            $(this).closest('tr').remove();
        }
    });
});

answered Jan 25, 2013 at 20:54

Travis J

82.5k43 gold badges213 silver badges280 bronze badges

Collectives™ on Stack Overflow

if input field has a value found in array, do this (jQuery/Javascript)

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related