CODEWITHSUNDEEP
jquery
Karem
Karem

Reputation: 18113

Empty all input fields in a tr in jQuery?

<tr>
<td>X</td>
<td><input type="text" value="blabla"></td>
<td><input type="text" value="blabla"></td>
<td><input type="text" value="blabla"></td>
<td><input type="text" value="blabla"></td>
</tr>
<tr>
<td>X</td>
<td><input type="text" value="again"></td>
<td><input type="text" value="again"></td>
<td><input type="text" value="again"></td>
<td><input type="text" value="again"></td>
</tr>

How can i in jQuery, click the X and it will empty the input fields that are inside the tr?

Upvotes: 2

Views: 4906

Answers (3)

roselan
roselan

Reputation: 3775

  $('td').click( function() {
      var $this = $(this);
      if ($this.text() == 'X')
      {
          $this.siblings().find('input').val('');
      }
    });

edit: updated after your comment. you can test it here edit 2: update after reading the description ^^

note: I don't know why "$this.siblings('input').val('');" doesn't work :/

Upvotes: 0

jeffreydev
jeffreydev

Reputation: 1722

In your current html structure this should work inside a document ready:

$('tr td:first-child').bind('click', function () {
   $(this).parent().find('input').val('');
});

jsfiddle: http://jsfiddle.net/jeffreydev/5S3sv/

Upvotes: 1

Clive
Clive

Reputation: 36955

Change the cell with X to this: 

<td><a href="#" class="click-here">X</a></td>

Then put this inside script tags in the page:

jQuery(document).ready(function() {
  jQuery('.click-here').click(function() {
    jQuery(this).parents('tr').find('input').val('');
  });
});

UPDATE

Made the jQuery based on class name rather than ID so it's more re-usable.

Upvotes: 1

Related Questions