How to add, edit and delete html fields dynamically using JQuery

In this post we will see how to add and delete fields dynamically with jquery, normally in a project we give options to users to add several rows and send them to the database, here I am creating a functionality to add and delete a static row. I will not show server code to store data in the database, I'm just helping you add a dynamic row in the HTML container.
Other post:
- How to export data from HTML tables to Excel, CSV, PNG and PDF with jQuery
- FullScreen menu design with CSS
- How to validate that the password that your users capture is strength with jQuery?
Now you can copy the complete example to make tests on your computer
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title> Dynamic Add Controls HTML</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css"> <script type="text/javascript" charset="utf8" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script> </head> <body> <div class="container" style="min-height:650px;"> <div style='margin-bottom:100px'> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- responsive-header --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5044208028083716" data-ad-slot="8330817881" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div><div class="col-sm-8"><h1>Source code: Dynamic Add Row</h1></div> <div class="col-sm-8" id="container2"> <div id="type_container"> <div class="row form-group" id="edit-0"> <div class="col-md-2 control-label"> <label for="username" class="control-label"> Brand : </label> </div> <div class="col-md-3"> <select data-placeholder="Choose an Type..." class="form-control" name=""> <option disabled="disabled" selected="selected" value="0">Select</option> <optgroup label="Swedish Cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> </optgroup> <optgroup label="German Cars"> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </optgroup> </select> </div> <div class="col-md-2 control-label"> <label for="username" class="control-label"> Point : </label> </div> <div class="col-md-5 clearfix"> <div class="row col-md-3"> <input type="text" maxlength='5' class="form-control input-sm" name="" value="0" /> </div> <div class="col-md-3 control-label"> <a class="add-type pull-right" href="javascript: void(0)" tiitle="Click to add more"><i class="glyphicon glyphicon-plus-sign"></i></a> </div> </div> </div> </div> <div id="type-container" class="hide"> <div class="row form-group type-row" id=""> <div class="col-md-2 control-label"> <label for="username" class="control-label"> Brand : </label> </div> <div class="col-md-3"> <select data-placeholder="Choose an Type..." class="form-control" name=""> <option disabled="disabled" selected="selected" value="0">Select</option> <optgroup label="Swedish Cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> </optgroup> <optgroup label="German Cars"> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </optgroup> </select> </div> <div class="col-md-2 control-label"> <label for="username" class="control-label"> Point : </label> </div> <div class="col-md-5 clearfix"> <div class="row col-md-3"> <input type="text" maxlength='5' class="form-control input-sm" name="" value="0" /> </div> <div class="col-md-3 control-label"><a class="remove-type pull-right" targetDiv="" data-id="0" href="javascript: void(0)"><i class="glyphicon glyphicon-trash"></i></a></div> </div> </div> </div> </div> <script> jQuery(document).ready(function () { var doc = $(document); jQuery('a.add-type').die('click').live('click', function (e) { e.preventDefault(); var content = jQuery('#type-container .type-row'), element = null; for (var i = 0; i < 1; i++) { element = content.clone(); var type_div = 'teams_' + jQuery.now(); element.attr('id', type_div); element.find('.remove-type').attr('targetDiv', type_div); element.appendTo('#type_container'); } }); jQuery(".remove-type").die('click').live('click', function (e) { var didConfirm = confirm("Are you sure You want to delete"); if (didConfirm == true) { var id = jQuery(this).attr('data-id'); var targetDiv = jQuery(this).attr('targetDiv'); //if (id == 0) { //var trID = jQuery(this).parents("tr").attr('id'); jQuery('#' + targetDiv).remove(); // } return true; } else { return false; } }); }); </script> </div> </body> </html>
Compartir:
Cargando...