Deleteing a text input in javascript

Question

I'm trying to make a button that when I'm pressing on it -> it adds another input button. And a button that when I'm pressing on -> it will delete the line.

This is the code I have till now:

javascript code:

$(function() {

        scntDiv = $('#p_scents');
        i = $('#p_scents p').size() + 1;

        $('#addScnt').on('click', function() {
            $('<p><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'"  placeholder="הכנס מספר טלפון" /> <a href="#" id="remScnt"><img src="images/deleteSmaller.PNG"></a>').appendTo(scntDiv);
            i++;
            return false;
        });


        $('#remScnt').on('click', function() { 
            if( i > 2 ) {
                $(this).parents('p').remove();
                i--;
            }
            return false;
        });

});

HTML\PHP CODE:

<table>
            <tr>
                <td>phone: <a href="#" id="addScnt"><img class="smallImages1" src="images/add.png"/></img></a></td><td><label for="p_scnts"><input type="text" name="phone" id="phone" value="<?php if (isset($phone[0])) echo $phone[0]; ?>" placeholder="insert phone" required/></label></td>

            </tr>
            <tr>

            <td></td><td id="p_scents">

                <p>

                </p>

            </td>
            </tr>
</table>

When I'm pressing the 'ADD' button it works and another input appears.. but when I'm pressing the delete button ... NOTHING HAPPENS. Where is the problem in my code? What do I need to fix?

rakhi4110 · Accepted Answer · 2014-02-26 09:35:02Z

4

Try event delegation

$('#p_scents').on('click', '#remScnt', function() {

instead of

$('#remScnt').on('click', function() {

Also a suggestion, its best practice to avoid id's for elements which might appear more than once in the page, as id should be unique. In your case, since you can add more than one text inputs, all the remove buttons will have the same id. You can use a class instead, and can change the code accordingly.

$('#p_scents').on('click', '.remScnt', function() {

edited Feb 26, 2014 at 9:35

answered Feb 26, 2014 at 9:24

rakhi4110

9,2812 gold badges33 silver badges49 bronze badges

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

Collectives™ on Stack Overflow

Deleteing a text input in javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related