jquery點選一個按鈕動態生成一組能刪除的input框
阿新 • • 發佈：2019-01-11
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src="js/jquery-1.11.3.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ var spotMax = 5; if($('div.spot').size() >= spotMax) {$(obj).hide();} $("input#add").click(function(){ addSpot(this, spotMax); }); }); function addSpot(obj, sm) { $('div#spots').append( '<div class="spot">' + '乘客：<input type="text" name="ckname" /> ' + '身份證：<input type="text" name="identification" /> ' + '<input type="button" class="remove" value="Delete" /></div>') .find("input.remove").click(function(){ $(this).parent().remove(); $('input#add').show(); document.all.num.value=$('div.spot').size(); }); document.all.num.value=$('div.spot').size(); if($('div.spot').size() >= sm) {$(obj).hide();} }; </script> </head> <body> <form action="index.html" method="post" name="asdf" id="asdf"> <div id="spots"> <input type="button" id="add" name="add" value="add" /><br /> </div> <input type="button" name="Submit" value="Submit" id="send" /><br /> 購買票數:<input name="num" type="text" value="0" readonly="readonly" /> </form> <script> $(function(){ document.all.num.value=$('div.spot').size(); }); $('#send').click(function(){ alert($('div.spot').size()); }); </script> </body> </html>