CODEWITHSUNDEEP
javascriptjquery
Anzeeja Backer
Anzeeja Backer

Reputation: 13

Add and Remove div using jquery does not work

I am using a simple script to add and remove a div using jquery. But it doesn't work. Is there a need to include any files?? Can anyone help me.

Here is my code

<html>    
    <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script language="javascript">    
    $(function() {
            var scntDiv = $('#p_scents');
            var i = $('#p_scents p').size() + 1;

$('#addScnt').live('click', function() {
            $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" 

name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
                i++;
                return false;
        });            
        $('#remScnt').live('click', function() { 
                if( i > 2 ) {
                        $(this).parents('p').remove();
                        i--;
                }
                return false;
        });
});
    </script>
</head>
<body>
<h2><a href="#" id="addScnt">Add Another Input Box</a></h2>    
<div id="p_scents">
    <p>
        <label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" /></label>
    </p>
</div>    
</body>
</html>

Upvotes: 0

Views: 290

Answers (4)

Reinder Wit
Reinder Wit

Reputation: 6615

There's actually 2 errors in your code:

  1. .live() is no longer available in the jQuery version you're using
  2. you have a unterminated string literal in your javascript

You need to change 'live()' to 'on()', and make sure the HTML string you are appending to scntDiv does not have any line breaks:

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

    $('#addScnt').on('click', function() {
        $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" class="remScnt">Remove</a></p>').appendTo(scntDiv);
        i++;
        return false;
    });

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

In order for the 'Remove' button to keep working, you'll have to use classes (since there are more than 1 of those links added to the DOM). I changed the ID attribute into a class attribute and I also changed

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

into 

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

Upvotes: 0

Dimitri Zetzsche
Dimitri Zetzsche

Reputation: 187

I've refactored you code a bit to following HTML:

<body>
<h2><a href="#" id="addScnt">Add Another Input Box</a></h2>

<div id="p_scents">
    <p>
        <input type="text" id="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" />
    </p>

</div>

</body>

and following Javascript:

$(function() {
    var scntDiv = $('#p_scents');
    var i = $('#p_scents p').size();

    $("#addScnt").on("click",function(){
        i++;
        $('<p><input type="text" id="p_scnt'+i+'" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" ><a href="#" class="remScnt">Remove</a></p>').appendTo(scntDiv);
    });

    $("#p_scents").on("click",".remScnt", function(){
        // items which need to be deleted are encapsulated within the parent item. You can use parent() to remove everything.
        $(this).parent().remove();
        i--;
    });
});

You can see a working example here: http://jsfiddle.net/u7QWA/36/

Upvotes: 0

Sudharsan S
Sudharsan S

Reputation: 15393

.live() is deprecated from jquery 1.7 .Use .on() instead of .live() in jquery

Upvotes: 1

Amin Jafari
Amin Jafari

Reputation: 7207

try this:

$('#addScnt').on('click', function() {
            $(scntDiv).append('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" 

name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>');
                i++;
                return false;
        });

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

Upvotes: 0

Related Questions