Jquery Remove and Element and Put It Back Again
Occasionally nosotros might find a need to dynamically add and remove HTML elements like textbox into a spider web page or application. Yep occasionally, since it is very of import that we have all the required information with united states of america before starting to design the forms or pages. This however does not rule out the possibility of such requirement. At that place have been instances where users wanted to have user-friendly access to adding as well as removing elements on their spider web pages.
Nosotros tin can do this gracefully with a little help from jQuery methods. I am talking about methods like append(), after() and remove(), as these are the main methods used for building a dynamic page with dynamically create elements. To exist very honest, y'all don't have to be a master of JavaScript to dynamically add or remove useful and interactive elements on your web page.
Dynamically Add Textbox and Button using jQuery and Salvage the Data in an SQL Server Database
See this demo
These elements can also take attributes and properties, all assigned dynamically while creating and adding them on the web folio. And after accomplishing their task, the controls can be removed from the folio. In fact, a single class or page tin be designed to reuse again and again for diverse purpose.
How to Clone a Textbox Without its Value Using jQuery .clone() Method
The entire scenario can be understood with the help of a small program. Nosotros will create a container in the grade of a DIV element, in which the dynamically created textboxes and button will be appended. Then when the page loads, it will display three predefined "buttons", whose primary function will be to add and remove the elements.
Forth with the textboxes, we will too create and add together a push button to Submit the values in the textboxes. The Submit button will be created simply one time, and for the textboxes, we are setting a limit of 20 textbox per container.
How to add contents dynamically to a DIV Element using jQuery .appendTo() and .append() Method
The Markup and the Script
<html> <head> <title>Create Elements Dynamically using jQuery</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script> </head> <body> <p>Click the button and each will perform some dynamic function!</p> <div id="chief"> <input type="button" id="btAdd" value="Add together Chemical element" form="bt" /> <input blazon="button" id="btRemove" value="Remove Element" class="bt" /> <input type="button" id="btRemoveAll" value="Remove All" grade="bt" /><br /> </div> </body> <script> $(certificate).ready(function() { var iCnt = 0; var container = $(certificate.createElement('div')).css({ padding: '5px', margin: '20px', width: '170px', border: '1px dashed', borderTopColor: '#999', borderBottomColor: '#999', borderLeftColor: '#999', borderRightColor: '#999' }); $('#btAdd').click(function() { if (iCnt <= 19) { iCnt = iCnt + i; $(container).suspend('<input type=text form="input" id=tb' + iCnt + ' ' + 'value="Text Element ' + iCnt + '" />'); if (iCnt == 1) { var divSubmit = $(document.createElement('div')); $(divSubmit).append('<input type=push button grade="bt"' + 'onclick="GetTextValue()"' + 'id=btSubmit value=Submit />'); } $('#main').afterwards(container, divSubmit); } else { $(container).append('<label>Reached the limit</label>'); $('#btAdd').attr('class', 'bt-disable'); $('#btAdd').attr('disabled', 'disabled'); } }); $('#btRemove').click(function() { if (iCnt != 0) { $('#tb' + iCnt).remove(); iCnt = iCnt - 1; } if (iCnt == 0) { $(container) .empty() .remove(); $('#btSubmit').remove(); $('#btAdd') .removeAttr('disabled') .attr('course', 'bt'); } }); $('#btRemoveAll').click(function() { $(container) .empty() .remove(); $('#btSubmit').remove(); iCnt = 0; $('#btAdd') .removeAttr('disabled') .attr('class', 'bt'); }); }); var divValue, values = ''; office GetTextValue() { $(divValue) .empty() .remove(); values = ''; $('.input').each(office() { divValue = $(document.createElement('div')).css({ padding:'5px', width:'200px' }); values += this.value + '<br />' }); $(divValue).append('<p><b>Your selected values</b></p>' + values); $('body').append(divValue); } </script> </html> Dynamically Add Textbox and Button using jQuery and Save Information in SQL Server using Asp.Net Web Method and Ajax
An Overview of the Methods
Let united states now observe out what methods we have used in the program and what are uses.
jQuery append() Method
The append() method volition add elements ane afterwards the other. A new element is added at the end of the last element. This method is attached with the dynamically created DIV elements, which serves as a container.
$(container).append()
$(divSubmit).append()
Unproblematic steps to Programmatically add LinkButton to a GridView Control – C# and Vb.Net
jQuery remove() Method
Nosotros used the remove() method for two particular reasons. The first purpose is to remove the controls ane by one. The 2nd time we used the method to remove all the elements attached to the container. Commonly, the method remove() is used immediately after submitting the form or to reset a container or the entire page.
jQuery after() Method
The later() method helps in keeping the sequence proper while calculation all the elements to the main container. We will add the submit button afterwards all the textboxes accept been added.
$('#chief').subsequently(container, divSubmit);
Also try… jQuery prepend() Method
This method will add an element at the beginning of the listing of elements. So the newly added element will be at height of the list, followed by the elements added earlier. We are not using it in our demo, only yous can do it yourself by making a slight change.
Modify this code…
$(container).append('<input blazon="text" id=tb' + iCnt + ' value=' + iCnt + ' />');
with this …
$(container).prepend('<input blazon="text" id=tb' + iCnt + ' value=' + iCnt + ' />');
See this demo
How to Create a Beautiful Dropdown Menu using Dynamic data extracted from an XML file using jQuery
Determination
Simple and yet useful, y'all tin now add any number of elements on your web page dynamically using the above procedures and methods. However, if you want to add text to an existing DIV element using jQuery, and then I would recommend that you check this article now.
Thanks for reading. ☺
← Previous Adjacent →
Source: https://www.encodedna.com/2013/07/dynamically-add-remove-textbox-control-using-jquery.htm
0 Response to "Jquery Remove and Element and Put It Back Again"
Post a Comment