Empty textbox using Jquery

Question

I'm able to hide the 'tr' when 'Remove' is clicked. with the following code.

$("a#minus").bind("click", function(e){
    $(this).closest('tr').hide();
});

But I also want to clear the content of the 2 text boxes (id of the textbox's are dynamic [frm_Expense_expensesVO___strAmount and frm_Expense_expensesVO___memo] here '*' goes from 1 to infinity). Please help. Thanks

<table>
<tr>
    <td>
        Amount
    </td>
    <td>
        Memo
    </td>
    <td>    
        &nbsp;
    </td>
</tr>
<tr>
    <td>
        <input type="text" name="expensesVO[0].strAmount" value="2.30" id="frm_Expense_expensesVO_0__strAmount"/>
    </td>
    <td>
        <input type="text" name="expensesVO[0].memo" value="Five" id="frm_Expense_expensesVO_0__memo"/>
    </td>
    <td>
        <a id="minus" href="#">Remove</a>
    </td>
</tr>
<tr>
    <td>
        <input type="text" name="expensesVO[1].strAmount" value="3.45" id="frm_Expense_expensesVO_1__strAmount"/>
    </td>
    <td>
        <input type="text" name="expensesVO[1].memo" value="Six" id="frm_Expense_expensesVO_1__memo"/>
    </td>
    <td>
        <a id="minus" href="#">Remove</a>
    </td>
</tr>
<tr>
    <td>
        <input type="text" name="expensesVO[2].strAmount" value="" id="frm_Expense_expensesVO_2__strAmount"/>
    </td>
    <td>
        <input type="text" name="expensesVO[2].memo" value="" id="frm_Expense_expensesVO_2__memo"/>
    </td>
    <td>
        <input type="submit" id="frm_Expense_ExpenseAdd_plus" name="action:ExpenseAdd_plus" value="+"/>
    </td>
</tr>
<tr>
    <td>    
        <label id="frm_Expense_transactionVO_amount">5.75</label>
    </td>
    <td align="right">
        <input type="submit" id="frm_Expense_Cancel" name="action:ExpenseAdd_cancel" value="Cancel"/>
    </td>
    <td align="left">
        <input type="submit" id="frm_Expense_Save" name="action:ExpenseAdd_save" value="Save"/>
    </td>
</tr>

Community · Accepted Answer · 2017-05-23 11:48:36Z

17

$("a#minus").bind("click", function(e){
    $(this).closest('tr').hide().find('input:text').val('');
});

Note: Also see darmen's answer on why the selector a#minus will not work as desired.

edited May 23, 2017 at 11:48

CommunityBot

11 silver badge

answered Jan 18, 2010 at 4:42

Chetan S

23.8k2 gold badges67 silver badges78 bronze badges

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

4 Comments

Alconja Over a year ago

Almost identical, but you beat me by 24 secs, so I concede & will delete my answer. :)

carillonator Over a year ago

why not just $('a#minus').click(function() { ....? Is there an advantage to using bind()?

Anurag Over a year ago

click is just a helper method, so it's identical to the bind call, but i'd wouldn't bother too much about saving a few characters. Not much to be gained there.

Chetan S Over a year ago

Using bind, you can bind a handler to multiple events like this - $().bind('keydown keyup', function(){...}). But yeah, no difference in this case.

Darmen · Accepted Answer · 2010-01-18 04:48:14Z

7

You should specify a class to anchors. Binding on a single id will raise an event for the latest one.

Example:

$("a.remove").live('click', function(){
   $(this).closest('tr').hide().find("input").val("");
});

answered Jan 18, 2010 at 4:48

Darmen

4,8813 gold badges32 silver badges53 bronze badges

Comments

geowa4 · Accepted Answer · 2010-01-18 04:43:34Z

0

Use the class attribute, and select the two textboxes using that className. Then you can set the value of that collection to the null-string.

answered Jan 18, 2010 at 4:43

geowa4

42.1k17 gold badges90 silver badges107 bronze badges

Comments

Anurag · Accepted Answer · 2010-01-18 04:51:17Z

0

Is closest defined in jQuery core or a plugin?

Anyways, you could get all text boxes within that tr and then do a regex match. This should only empty the text boxes that match the id's mentioned in your question.

$("a#minus").bind("click", function(e){
    var row = $(this).closest('tr');
    $("input:text", row).each(function(item) {
        var id = item.id;
        if(/frm_Expense_expensesVO_[0-9]+__strAmount/.test(id)) {
            $(item).val('');
        }
        else if(/frm_Expense_expensesVO_[0-9]+__memo/.test(id)) {
            $(item).val('');
        }
    });
    row.hide();
});

answered Jan 18, 2010 at 4:51

Anurag

142k37 gold badges223 silver badges262 bronze badges

1 Comment

Chetan S Over a year ago

closest() is in jQuery core 1.3 onwards - docs.jquery.com/Traversing/closest

Collectives™ on Stack Overflow

Empty textbox using Jquery

4 Answers 4

4 Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related