在javascript中删除文本输入

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?

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() {