<div class= "button"> <button id="more" type="submit">add more parameters</button> <button id="remove" type="submit">remove parameters</button> </div> <script> var count = 2; $('#more').click(function(){ if (count==11) { } else { $("div2").append("<div class='fieldblock'><fieldset><legend>parameter " + count + "</legend><label >parameter name: </label><select type=text id='name" + count + "' name='name' ><option></option></select></br></br><label >address: </label><select type=text id='address" + count + "' name='address' ><option></option></select></br></br><label >data size: </label> </br><select type=text id='size" + count + "' name='size' ><option></option></select> </select> </br> </br><label >write data: </label> </br><input type=text id='data" + count + "' name='data' style='width: 14em;'></br> </br></fieldset></div>"); count++; } }); $('#remove').click(function(){ .... }); can show me how if user clicks on remove button, div appended can removed? if user appends multiple times, want remove button remove 1 div @ time.
if convert id of remove button class, may add remove button each new created div:
$(function () { var count = 2; $('#more').on('click', function(){ if (count==11) { } else { $(".div2").append("<div class='fieldblock'><fieldset><legend>parameter " + count + "</legend><label >parameter name: </label><select type=text id='name" + count + "' name='name' ><option></option></select></br></br><label >address: </label><select type=text id='address" + count + "' name='address' ><option></option></select></br></br><label >data size: </label> </br><select type=text id='size" + count + "' name='size' ><option></option></select> </select> </br> </br><label >write data: </label> </br><input type=text id='data" + count + "' name='data' style='width: 14em;'></br> </br><button class=\"remove\" type=\"submit\">remove parameters</button></fieldset></div>"); count++; } }); $('#last').on('click', function(){ $('div.fieldblock:last').remove(); count--; }); $(document).on('click', '.remove', function(e){ $(this).closest('div.fieldblock').remove(); count--; }); });<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <div class="div2"> <div class= "button"> <button id="more" type="submit">add more parameters</button> </div> <div class= "button"> <button id="last" type="submit">remove last parameters</button> </div> </div>
Comments
Post a Comment