How to Add or Remove input fields using Jquery | Jquery Clone | AppendTo

hello everyone welcome back to my channel so today's topic is how to add or remove input fields using jquery so i have created this view for add protect and remove product so there is a input field product name and add more product button and remove button so these two button will be working using js so let's move to code i have given title add more button included bootstrap given heading add product created a form input field product name to button for add and remove product for add button let's go for on click call a function add product after that in script define add product function define div with class product dev and in js fetch this class and clone it dot append to for append to let's create another dev that will be like more products so give dave class more products let's give it id now here define that id and let's go and check in browser there is new field created now let's inspect and see complete product div is cloned into more product id now if i gain you will click the two input field is created as there is now two productive so now let's go and dissolve that issue so let's create another div with id let's say first product let's write same id in js as well so now let's go and again click now you can see after clicking only one product name is adding and previous there are two products name are adding write something in product name and click add more button now you can see same value is also common so we don't need that so let's go and change that in js so find input field in form and then pass its value to blank dot end so now let's go and see now type again car now you can see new product is adding but it's adding blank value so now let's go and see if there are multiple fields and that needs to be cloned so copy div that is class homegrown and paste inside same product div change its name to product price and type to number now let's go let me just add one hr as well now refresh add more now you can see price is also added and if i'll give any value so it is also going blank so for tech input field it's working fine so now let's add one more field and that's going to be text area and change its to let's say product description and let's go and check so pass some value add more product you can see now text area is having its fairly so again let's go and change something in js copy find input one and in find give it text area and refresh again pass somewhere you add now text area is also blank so adding part is finished here now let's move to remove product let's do same thing an on click call a function that is remove product and in js define that function that is remove product and inside that dev more product and inside that dot productive dot last dot remove so that's what i'm doing is in promo product dev whatever last clone will be it will be removed so in browser you can see it's removing all this so let me just inspect and show you what exactly is happening so if i'm adding add more product there is a one product div is adding and if i'm going to remove one productive is removing and that is last one is removing so that's the only js part you need to write so i hope this video is helpful to you please like share and subscribe to my channel thank you so much for watching

Channel: Knowledge Thrusters

Views: 2,770

Keywords: jquery, Add or Remove input fields using Jquery, How to Add or Remove input fields using Jquery, add input fields using jquery, remove input fields using jquery, clone, jquery clone, appendto, appendto jquery, js, javascript

Id: 7LpZYOyVDK0

Length: 5min 35sec (335 seconds)

Published: Sun Dec 06 2020