javascript - Add and Remove div using jquery does not work -
i using simple script add together , remove div using jquery. doesn't work. there need include files?? can help me.
here 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 = $('#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_' + +'" value="" placeholder="input value" /></label> <a href="#" id="remscnt">remove</a></p>').appendto(scntdiv); i++; homecoming false; }); $('#remscnt').live('click', function() { if( > 2 ) { $(this).parents('p').remove(); i--; } homecoming false; }); }); </script> </head> <body> <h2><a href="#" id="addscnt">add 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>
i've refactored code bit next html:
<body> <h2><a href="#" id="addscnt">add 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 next javascript:
$(function() { var scntdiv = $('#p_scents'); var = $('#p_scents p').size(); $("#addscnt").on("click",function(){ i++; $('<p><input type="text" id="p_scnt'+i+'" size="20" name="p_scnt_' + +'" value="" placeholder="input value" ><a href="#" class="remscnt">remove</a></p>').appendto(scntdiv); }); $("#p_scents").on("click",".remscnt", function(){ // items need deleted encapsulated within parent item. can utilize parent() remove everything. $(this).parent().remove(); i--; }); }); you can see working illustration here: http://jsfiddle.net/u7qwa/36/
javascript jquery
No comments:
Post a Comment