Remove dynamically created textboxes using jquery

Question

I am creating textboxes dynamically on button click. I want to know to remove textboxes with another button click.

HTML

<table class="table-fill tbfill">
    <thead>
       <tr>
         <th class="text-left" runat="server">Screen Name</th>
         <th class="text-left" runat="server">Seats Available</th>
         <th class="text-left"></th>
       </tr> 
    </thead>
   </table>
<input id="btnAdd" type="button" value="ADD"/>

jQuery

$("#btnAdd").bind("click", function ()
       {
        $("tbody.addScreen").append('<tr id="row0">' +
            '<td class="text-left" name="screenName"> <input id="screenNameTextBox"/> </td>' +
            '<td class="text-left"> <input id="seatsAvlTextBox" name="seatsAvl" /> </td>' +
            '<td class="text-left"> <input type="button" value="Remove" id=Removebtn/> </td>' +
            '</tr>');
       });

I have a Remove button here. When I click the button I need to remove the textboxes from the corresponding row. How can I do this?

You will have many items with the same ids row0, Removebtn which is incorrect. Use classes instead. — Yeldar Kurmangaliyev
– Yeldar Kurmangaliyev, Commented Dec 30, 2015 at 10:52

Yeldar Kurmangaliyev · Accepted Answer · 2015-12-30 10:57:03Z

2

You will have many items with the same ids Removebtn, row0, screenNameTextBox etc. which is incorrect. Use classes instead.

Change

<input type="button" value="Remove" id=Removebtn/>

and other ids to similar classes:

<input type="button" value="Remove" class="RemoveBtn"/>

Then, you will be able to use event delegation to assign a handler for all these buttons. For example, this code will remove the whole row on button click:

$(document).on('click', '.RemoveBtn', function() {
    $(this).closest('tr').remove();
});

Here is the working JSFiddle demo.

If you want to remove textboxes only, then use:

$(document).on('click', '.RemoveBtn', function() {
    $(this).closest('tr').find('input[type="text"]').remove();
});

edited Dec 30, 2015 at 10:57

answered Dec 30, 2015 at 10:54

Yeldar Kurmangaliyev

34.3k13 gold badges64 silver badges104 bronze badges

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

Comments

Ibrahim Khan · Accepted Answer · 2015-12-30 10:56:01Z

0

You can do it like following. Hope this will help you.

$('.tbfill').on('click', '#RemoveBtn', function() {
    $(this).closest('tr').find('input').remove();        
})

Use $(this).closest('tr').remove() if you want to remove complete row.

answered Dec 30, 2015 at 10:56

Ibrahim Khan

20.8k7 gold badges46 silver badges57 bronze badges

Comments

Hemal · Accepted Answer · 2015-12-30 10:59:41Z

0

If you want to remove only textboxes

$(document).on('click', '.RemoveBtn', function() {
    $(this).closest('tr').find("input:text").remove();
});

edited Dec 30, 2015 at 10:59

answered Dec 30, 2015 at 10:58

Hemal

3,7722 gold badges27 silver badges57 bronze badges

1 Comment

Yeldar Kurmangaliyev Over a year ago

It will remove button as well.

Collectives™ on Stack Overflow

Remove dynamically created textboxes using jquery

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related