I have several line of div with same id, i would like to multiply two input value of each div and display result in third input after changing value of val1 input or val2 input
html
<div class="uk-width-medium-9-10" id="commandligne">
<div class="uk-grid uk-grid-small" data-uk-grid-margin>
<div class="uk-width-medium-2-10">
<label for="inv1">P.U. (€)</label>
<input type="text" name="prix-item[]" class="md-input val1" id="inv1"/>
</div>
<div class="uk-width-medium-2-10">
<label for="inv2">Qté (H)</label>
<input type="text" name="qte-item[]" class="md-input val2" id="inv2" />
</div>
<div class="uk-width-medium-2-10">
<label for="inv3">Total(€)</label>
<input type="text" name="total-item[]" class="md-input val3" value="0" id="inv3" readonly/>
</div>
</div>
</div>
My JS that doesnt work at all
$(document).ready(function () {
$("#commandligne input").keyup(multInputs);
function multInputs() {
var mult = 0;
// for each row:
$("div#commandligne").each(function () {
// get the values from this div:
var $val1 = $('.val1', this).val();
var $val2 = $('.val2', this).val();
var $total = ($val1 * 1) * ($val2 * 1)
$('.val3',this).val($total);
});
}
});
Nothing happen when i change value of 2 input, then i have 0 error .
Here Jsfiddle
https://jsfiddle.net/a66bgddu/1/
Consider Usage of id Attributes
You are currently appending multiple elements with the same ID, which is not valid. id attributes by definition must be unique :
The id global attribute defines a unique identifier (ID) which must be
unique in the whole document. Its purpose is to identify the element
when linking (using a fragment identifier), scripting, or styling
(with CSS).
If you need to target multiple elements, then consider using classes or data-* attributes to select them. Alternatively, you could track the number of "rows" and append the number after each ID and use the jQuery "starts-with" selector to target them:
Ensuring Dynamic Elements Are Targeted
Currently, your event handlers do not target any elements that may be added to the DOM in the future. You may want to consider using the .on() function handle wiring up your events, which will target those that currently exist in the DOM and those that may be added in the future :
// Example using a class "command-row" as opposed to Id attributes
$(document).on('keyup',"div.command-row input",multInputs);
Parse Your Values
Since you are performing arithmetical operations on your values, you'll want to ensure that you are actually parsing the contents of your <input> elements as opposed to simply retrieving string versions of their values. You can do this using the parseInt() function :
// Parse your values
var $val1 = parseInt($('.val1', this).val());
var $val2 = parseInt($('.val2', this).val());
// Get your total
var $total = $val1 * $val2
// Set your value
$('.val3',this).val($total);
Example: Putting It All Together
document.getElementById("test").onclick = function() {
var ok = true;
if (ok === true) {
var html = [
'<br/><br/>',
'<div class="uk-grid uk-margin-bottom" data-uk-grid-margin>',
'<div class="uk-width-medium-9-10 command-row">',
'<div class="uk-grid uk-grid-small" data-uk-grid-margin>',
'<div class="uk-width-medium-2-10">',
'<label for="inv1">P.U. (€)</label>',
'<input type="text" name="prix-item[]" class="md-input val1" />',
'</div>',
'<div class="uk-width-medium-2-10">',
'<label for="inv2">Qté (H)</label>',
'<input type="text" name="qte-item[]" class="md-input val2" />',
'</div>',
'<div class="uk-width-medium-2-10">',
'<label for="inv3">Total(€)</label>',
'<input type="text" name="total-item[]" class="md-input val3" value="0" readonly/>',
'</div>',
'</div>',
'</div>',
'</div>'
].join('');
var div = document.createElement('div');
div.innerHTML = html;
document.getElementById('testa').appendChild(div);
}
};
$(document).ready(function() {
$(document).on('keyup', "div.command-row input", multInputs);
function multInputs() {
var mult = 0;
// for each row:
$("div.command-row").each(function() {
// get the values from this div:
var $val1 = $('.val1', this).val();
var $val2 = $('.val2', this).val();
var $total = ($val1 * 1) * ($val2 * 1)
$('.val3', this).val($total);
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="testa">
<div class="uk-grid uk-margin-bottom" data-uk-grid-margin>
<div class="uk-width-medium-9-10 command-row">
<div class="uk-grid uk-grid-small" data-uk-grid-margin>
<div class="uk-width-medium-2-10">
<label for="inv1">P.U. (€)</label>
<input type="text" name="prix-item[]" class="md-input val1" />
</div>
<div class="uk-width-medium-2-10">
<label for="inv2">Qté (H)</label>
<input type="text" name="qte-item[]" class="md-input val2" />
</div>
<div class="uk-width-medium-2-10">
<label for="inv3">Total(€)</label>
<input type="text" name="total-item[]" class="md-input val3" value="0" readonly/>
</div>
</div>
</div>
</div>
</div>
<div id="test" class="uk-grid" data-uk-grid-margin>
<div class="uk-width-1-1">
<div id="form_invoice_services"></div>
<div class="uk-text-center uk-margin-medium-top uk-margin-bottom">
Ajouter une ligne
</div>
</div>
</div>
Yeah, the fundamental issue that you are facing is that id attributes MUST be unique on a page in HTML. Browsers are flexible about this and don't really complain about it if you have duplicates, but both JavaScript and jQuery are not.
In both cases (getElementById in JavaScript and $("#aDuplicatedId") in jQuery), the logic will only capture a single DOM node/jQuery object . . . specifically the first one that it encounters in the DOM that has the specified id.
To do what you are trying to do, consider using a common class that you can select on. This will capture all instances and allow you to iterate through using your existing code.
Related
i want to create a dynamic form like the user needs to add attribute but those attribute not defined previously he can add as many he can for example he created a dress he want to add attribute like size he will click on add attribuute that will generate an html i have did this but there i need to insert some variable so i can change the name of the attributes
var i =1;
function add_fields() {
var emptydiv = document.createElement('div')
emptydiv.innerHTML = '<div class="col-12 col-md-6"><div class="group"><input type="text" name="`{i}`" id="Royalties" required><span class="highlight"></span><span class="bar"></span><label>Attributes</label></div></div><div class="col-12 col-md-6"><div class="group"><input type="text" name="Size" id="Size" required><span class="highlight"></span><span class="bar"></span><label>value</label></div></div></div>'
document.getElementById('addable').appendChild(emptydiv);
i++;
console.log(i)
return emptydiv;
// console.log("Hello world")
}
what i want to change the name fields in this html by the variable i
I believe this is what you are trying to accomplish.
I changed regular single quotes into a template literal
var i =1;
function add_fields() {
var emptydiv = document.createElement('div')
emptydiv.innerHTML = `<div class="col-12 col-md-6"><div class="group"><input type="text" name="${i}" required><span class="highlight"></span><span class="bar"></span><label>Attributes</label></div></div><div class="col-12 col-md-6"><div class="group"><input type="text" name="Size" id="Size" required><span class="highlight"></span><span class="bar"></span><label>value</label></div></div></div>`
document.getElementById('addable').appendChild(emptydiv);
i++;
console.log(i)
return emptydiv;
// console.log("Hello world")
}
add_fields();
<div id="addable"></div>
i have a single page which is divided into two sections.So at first first section is seen and we need to fill the inputs value and when we click go to next page button then the first section is now hidden and second section is shown.Then only we can submit the form.
Now what i want is that in the first section, i have four inputs like shown below
<div class="room_details_first col-md-12" id="first_order">
<div class="col-md-3">
<input type="text" placeholder="Food items" name="others_food_items[]" data-view-id="#location"/>
</div>
<div class="col-md-3">
<input type="text" placeholder="Hotel Name" name="others_hotel[]"/>
</div>
<div class="col-md-3">
<input type="text" placeholder="Hotel price" name="others_hotel_price[]"/>
</div>
<div class="col-md-3">
<input type="text" placeholder="Customer Price" name="others_client_price[]"/>
</div>
</div>
Now by using jquery i have append the inputs and the code is shown below
function add_others_order(){
var output="";
output+= '<div class="room_details_first col-md-12" id="first_order">';
output+='<div class="col-md-3"><input type="text" placeholder="Food items" name="others_food_items[]" data-view-id="#location"/></div>';
output+='<div class="col-md-3"> <input type="text" placeholder="Hotel Name" name="others_hotel[]"/> </div>';
output+='<div class="col-md-3"><input type="text" placeholder="Hotel price" name="others_hotel_price[]"/></div>';
output+='<div class="col-md-2"> <input type="text" placeholder="Customer Price" name="others_client_price[]"/></div>';
output+='<div class="col-md-1" ><i class="fa fa-remove"></i></div>';
output+='</div>';
$('#first_order').after(output);
}
now what i need is i need to save the inputs value before submitting and list it in second section of the page.i have tried to do it but i am failed many times. And i have also found similar answers which is given below
Display the data entered in a form before submitting the form
Guys i need help.
Here is what you want, you will get all input's value and you can do
what ever you want with it.
function nextStep() {
var allFields = document.getElementsByTagName("input");
//console.log(allFields);
for (var index in allFields) {
console.log('name : '+allFields[index].name);
if (allFields[index].type == "text") { // you can change condition by name instead of type
if (allFields.hasOwnProperty(index)) {
var attr = allFields[index];
console.log(attr.value)
}
}
}
}
<div class="col-md-3">
<input type="text" placeholder="Food items" name="others_food_items[]" data-view-id="#location" />
</div>
<div class="col-md-3">
<input type="text" placeholder="Hotel Name" name="others_hotel[]" />
</div>
<div class="col-md-3">
<input type="text" placeholder="Hotel price" name="others_hotel_price[]" />
</div>
<div class="col-md-3">
<input type="text" placeholder="Customer Price" name="others_client_price[]" />
</div>
<input type="button" onclick="nextStep()" value="Next step">
I think this is what you want, or as close to what you need, I add an Id attribute so you can do add/remove:
var stored_data = [];
stored_data.total = 0;
$('#dummy').on('click', function(){
var obj = {
id: stored_data.length,
food: food.value,
hotel_name: hotel_name.value,
hotel_price: hotel_price.value,
customer_price: customer_price.value
};
stored_data.push(obj);
stored_data.total += parseInt(obj.customer_price);
//$('#first_section').hide();
var output = '<div class="room_details_first col-md-12" id="first_order">';
output += '<div>Order ' + obj.id + '</div>';
output += '<div class="col-md-3">Food: ' + obj.food + '</div>';
output += '<div class="col-md-3">Hotel Name: ' + obj.hotel_name + '</div>';
output += '<div class="col-md-3">Hotel Price' + obj.hotel_price + '</div>';
output += '<div class="col-md-2">Customer Price' + obj.customer_price + '</div>';
output += '<div class="col-md-1" ><i class="fa fa-remove"></i></div> ';
$('#new_section').append(output);
$('#total').text(stored_data.total);
});
https://jsfiddle.net/5uka65tx/2/
Here's a way to do it by using clone() on the whole first order and do some modifications to add the link and change duplicate ID and last item column class.
First use serializeArray() to get the values to store
var values = $('#first_order :input').serializeArray();
console.log(values);
then clone , modify and insert
var link = '<div class="col-md-1" ><i class="fa fa-remove"></i>LINK</div>';
// clone first order and update ID
var $first = $('#first_order').clone().attr('id', 'first-order_2');
// modify column on last one and add the link
$first.children(':last').toggleClass('col-md-2 col-md-3').after(link);
// insert in second position
$('#second').append($first)
DEMO
By taking reference of Jigar7521, i tried to do the following way
var allFields = document.getElementsByClassName("others_order");
var others_total_price='0';
var others_food_items=new Array();
var others_hotel_name=new Array();
var others_hotel_price=new Array();
var others_client_price=new Array();
//var others['food_items'] = new Array();
var ficounter=0;
var hcounter=0;
var hpcounter=0;
var cpcounter=0;
Array.prototype.forEach.call(allFields, function(el) {
if(el.name=='others_client_price[]'){
others_client_price[cpcounter]=el.value;
cpcounter++;
others_total_price=parseFloat(others_total_price)+parseFloat(el.value);
}
if(el.name=='others_food_items[]'){
others_food_items[ficounter]=el.value;
ficounter++;
}
if(el.name=='others_hotel[]'){
others_hotel_name[hcounter]=el.value;
hcounter++;
}
if(el.name=='others_hotel_price[]'){
others_hotel_price[hpcounter]=el.value;
hcounter++;
}
});
$('#others_total_price').val(others_total_price);
var others_output="<h4>Others Order</h4>";
for(var i=0;i<=ficounter;i++){
others_output+='<div ><div class="col-md-12"><div class="col-md-3">'+others_food_items[i]+'</div><div class="col-md-3">'+others_hotel_name[i]+'</div><div class="col-md-3">'+others_hotel_price[i]+'</div><div class="col-md-3"> '+others_client_price[i]+'</div></div></div>';
}
$('#others_id').html(others_output);
it worked but i get errors like undefined
i tried to console.log every array and i got what i did not have expected
I can't figure out how to add event handlers to dynamically added html in the fiddle example below. Through searching I realize you have to delegate the handler to an element originally on the page. However, I am passing the newly added elements into a module (dateTimeRangeWidget) that sets everything up.
https://jsfiddle.net/burtonrhodes/u2L2epmz/
html
<h3>
Date Picker Test
<a href="#" id="do_addEvent" class="btn btn-warning pull-right">
Add Event
</a>
</h3>
<hr/>
<form>
<div class="eventsDiv">
<!-- Event[0] -->
<div class="eventDiv" data-id="0">
<div class="row">
<div class="form-group col-xs-3">
<label>Start Date</label>
<input type="text" name="event[0].startDate" class="form-control startDate">
<div class="checkbox">
<label>
<input type="checkbox" name="event[0].allDayEvent" class="allDayEvent" />
All Day Event
</label>
</div>
</div>
<div class="form-group col-xs-3 timeDiv">
<label>Start Time</label>
<input type="text" name="event[0].startTime" class="form-control startTime">
</div>
<div class="form-group col-xs-3">
<label>End Date</label>
<input type="text" name="event[0].endDate" class="form-control endDate">
</div>
<div class="form-group col-xs-3 timeDiv">
<label>End Time</label>
<input type="text" name="event[0].endTime" class="form-control endTime">
</div>
</div>
<hr/>
</div>
</div>
<!-- ./eventsDiv -->
</form>
js
$(document).ready(function() {
// Wire do_addEvent button
$("#do_addEvent").on("click", function(event) {
// Copy and add evenDiv html at the bottom
var lastEventDiv = $("div.eventDiv").last();
var newEventDiv = $(lastEventDiv).after($(lastEventDiv).html());
// TODO rename input variable names here with newId
// --- code here --
// Setup the new eventDiv
// !!! This doesn't work !!!
setUpEventDiv(newEventDiv);
event.preventDefault();
});
// Setup all eventDiv's when the page loads
$("div.eventDiv").each(function(index, eventDiv) {
// Wire the eventDiv
setUpEventDiv(eventDiv)
});
});
/**
* Finds all the div elements and calls setupDateTimePicker
*/
function setUpEventDiv(eventDiv) {
var $startDateTextBox = $(eventDiv).find('.startDate:first').datepicker();
var $endDateTextBox = $(eventDiv).find('.endDate:first');
var $startTimeTextBox = $(eventDiv).find('.startTime:first');
var $endTimeTextBox = $(eventDiv).find('.endTime:first');
var $allDayEventCheckBox = $(eventDiv).find('.allDayEvent:first');
var $timesDiv = $(eventDiv).find('.timeDiv');
// Setup time picker
setupDateTimePicker($startDateTextBox, $startTimeTextBox,
$endDateTextBox, $endTimeTextBox,
$allDayEventCheckBox, $timesDiv);
}
/**
* Sets up the custom date/time picker widget
*/
function setupDateTimePicker($startDate, $startTime,
$endDate, $endTime,
$allDayEvent, $timesDiv) {
var mydtrw = dateTimeRangeWidget(jQuery);
mydtrw.init({
$startDateElem: $startDate,
$endDateElem: $endDate,
$startTimeElem: $startTime,
$endTimeElem: $endTime,
$allDayEventElem: $allDayEvent,
$timeElements: $timesDiv
});
}
There was some mistakes in your code.
When you did this $(lastEventDiv).html() you're actually stripping the parent html element so you always had just one .eventDiv
Here's a working fiddle.
$(document).ready(function() {
// Wire do_addEvent button
$("#do_addEvent").on("click", function(event) {
// Copy and add eventDiv html at the bottom
var lastEventDiv = $("div.eventDiv").last();
var newEventDiv = lastEventDiv.clone(); //clone the last event div. When you were adding it with .html(), you were removing the parent tags so you never had a second .eventDiv.
var newId = $("div.eventDiv").length; //lets get a unique ID. This should change in your code for something better.
newEventDiv.data('id', newId); //change id
//change the id and name atributes for it to work correctly
$.each(newEventDiv.find('input'), function(index, element) {
$(element).attr('id', 'input' + Math.round(Math.random()*100));
$(element).attr('name',$(element).attr('name').replace(/\[\d+](?!.*\[\d)/, '[' + newId + ']'));
$(element).removeClass('hasDatepicker'); //remove the hasDatepicker class for the plugin to work correctly.
})
lastEventDiv.after(newEventDiv); //append id after the last event div
// TODO rename input variable names here with newId
// --- code here --
// Wire the new eventDiv date/time picker
// !!! This doesn't work !!!
setUpEventDiv(newEventDiv);
event.preventDefault();
});
// Loop through event divs and wire actions for each section
$("div.eventDiv").each(function(index, eventDiv) {
// Wire the eventDiv
setUpEventDiv(eventDiv)
});
});
I wrote the below jQuery code, in this code when I click on #addbtn 2 text-box with this code below is created
var i = 2;
/* button #add_btn */
$(document).on("click", "#add_btn", function(evt) {
$('.add_checkbox').append("<input type='checkbox' id=foodcheckbox_" + i + " style='margin-bottom:20px;'><br/>");
$(".add_food").append("<input class='wide-control form-control default input-sm foodha' type='text' placeholder='Food' id=food_input" + i + " style='margin-bottom:5px;'>");
$(".add_price").append("<input class='wide-control form-control default input-sm priceha' type='text' placeholder='Price' id='price_input" + i + "' style='margin-bottom:5px;'>");
i++;
});
This code works fine, but when I want to select text-boxes that are added with the above code to get the content of them the selector by id isn't working, below is the code that I use to get value of these text-boxes:
/* button Submit */
$(document).on("click", ".uib_w_60", function(evt) {
var foodid = [];
var priceid = [];
/* your code goes here */
/* first I get id of .foodha class */
$(".foodha").each(function() {
var IDss = $(this).prop("id");
foodid.push(IDss);
});
/* second I get id of .priceha class */
$(".priceha").each(function() {
var pID = $(this).prop("id");
priceid.push(pID);
});
var newfoodpriceid = [];
/* here I dont know why the Id that gotten save
twice in array, for example save with this pattern
[food_input2, food_input3, food_input2, food_input3]
and to prevent this I use a trick and save it in another
array with the code below: */
for (var c = 0; c < priceid.length / 2; c++) {
newfoodpriceid.push({
'foodid': foodid[c],
'priceid': priceid[c]
});
}
/* then I want to get value of text box with exact
id that I select with jQuery selector but the
selector isn't working and the returned value
is nothing but I enter a value in text box that
have below id: */
var pr = $("#" + newfoodpriceid[0].priceid).val();
$("p").text(pr);
});
I explain anything that I think you need to know about what I want to do.
HTML code before I click on addbtn to add text-boxes:
<div class="grid grid-pad urow uib_row_42 row-height-42" data-uib="layout/row" data-ver="0">
<div class="col uib_col_46 col-0_1-12_1-7" data-uib="layout/col" data-ver="0">
<div class="widget-container content-area vertical-col center">
<div class="add_checkbox" style="margin-top:5px"></div>
<span class="uib_shim"></span>
</div>
</div>
<div class="col uib_col_48 col-0_6-12_6-7" data-uib="layout/col" data-ver="0">
<div class="widget-container content-area vertical-col">
<div class="add_food"></div>
<span class="uib_shim"></span>
</div>
</div>
<div class="col uib_col_47 col-0_5-12_5-5" data-uib="layout/col" data-ver="0">
<div class="widget-container content-area vertical-col">
<div class="add_price"></div>
<span class="uib_shim"></span>
</div>
</div>
<span class="uib_shim"></span>
</div>
And that HTML code after click on "add btn" twice
<div class="add_food">
<input class="wide-control form-control default input-sm foodha" type="text" placeholder="Food" id="food_input2" style="margin-bottom:5px;">
<input class="wide-control form-control default input-sm foodha" type="text" placeholder="Food" id="food_input3" style="margin-bottom:5px;">
</div>
<div class="add_price">
<input class="wide-control form-control default input-sm priceha" type="text" placeholder="Price" id="price_input2" style="margin-bottom:5px;">
<input class="wide-control form-control default input-sm priceha" type="text" placeholder="Price" id="price_input3" style="margin-bottom:5px;">
</div>
As you can see the text-box with the id that I want is generated fine, but I can't select it with using its id.
The only problem I see in your code is that once the page has run you must re-call the "each" function from jquery. When this "loop" is performed there are no "foodha" or "priceha" class cointaining elements. You could put the
$(".foodha").each(function() {
var IDss = $(this).prop("id");
foodid.push(IDss);
});
in a sleep loop or in a js function which you would call later.Like this:
setTimeout(function(){
$(".foodha").each(function() {
var IDss = $(this).prop("id");
foodid.push(IDss);
});
},1000); //for a second delay
or
function call_after_creating(){
$(".foodha").each(function() {
var IDss = $(this).prop("id");
foodid.push(IDss);
});
}
<div class="form-inline">
<div class="form-group col-lg-4">
<label>Select Item:</label>
<div id="field1">
<select class="form-control" name="item_1">
<?php if($item !=0){foreach ($item as $list_item){?>
<option value="<?php echo $list_item['item'];?>">
<?php echo $list_item[ 'item'];?>
</option>
<?php }}else {?>
<option value="">No Items Available</option>
<?php }?>
</select>
</div>
</div>
<div class="form-group col-lg-2">
<label>Quantity:</label>
<div id="field2">
<input type="number" min="1" class="form-control input-md" name="quantity_1" />
</div>
</div>
<div class="form-group col-lg-3">
<label>Cost(per piece):</label>
<div id="field3">
<input type="number" min="1" class="form-control input-md" name="cost_1" />
</div>
</div>
<div class="form-group col-lg-3" style="margin-top:25px">
<div id="field4">
<button id="addmore" onclick="add();" class="btn add-more" type="button">+</button>
</div>
</div>
</div>
I have these three fields('item, quantity and cost') and these three fields are added incrementally on clicking + button but i am having removing these buttons on - click.
I simply need these three input fields to be added at one click and remove these fields on one click as well. also these fields name should be incremented.
<script>
function add() {
i++;
var div1 = document.createElement('div');
div1.innerHTML = '<select class="form-control" name="item_' + i + '"> <option value=""></option></select>';
document.getElementById('field1').appendChild(div1);
var div2 = document.createElement('div');
div2.innerHTML = '<input type="number" min="1" class="form-control input-md" name="quantity_' + i + '" />';
document.getElementById('field2').appendChild(div2);
var div3 = document.createElement('div');
div3.innerHTML = '<input type="number" min="1" class="form-control input-md" name="cost_' + i + '" />';
document.getElementById('field3').appendChild(div3);
var div4 = document.createElement('div');
div4.innerHTML = '<button id="remove" onclick="remove_btn(this)" class="btn remove" type="button">-</button>';
document.getElementById('field4').appendChild(div4);
}
</script>
There are several issues:
Avoid putting blobs of HTML in your javascript, put your HTML in the HTML file.
Avoid IDs, particularly when they will certainly be duplicated. Duplicate IDs are illegal. Only the first one can be found with a lookup.
Avoid concatenating together strings of text to generate your HTML. It is a too easy to make a mistake and put an XSS vulnerability in your code that way.
(function($) {
"use strict";
var itemTemplate = $('.example-template').detach(),
editArea = $('.edit-area'),
itemNumber = 1;
$(document).on('click', '.edit-area .add', function(event) {
var item = itemTemplate.clone();
item.find('[name]').attr('name', function() {
return $(this).attr('name') + '_' + itemNumber;
});
++itemNumber;
item.appendTo(editArea);
});
$(document).on('click', '.edit-area .rem', function(event) {
editArea.children('.example-template').last().remove();
});
$(document).on('click', '.edit-area .del', function(event) {
var target = $(event.target),
row = target.closest('.example-template');
row.remove();
});
}(jQuery));
.hidden { display: none; }
.formfield { float: left; }
.example-template { clear: left; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hidden">
<div class="example-template">
<div class="formfield"><input placeholder="Name" name="name"></div>
<div class="formfield"><input placeholder="Addr" name="addr"></div>
<div class="formfield"><input placeholder="Post" name="post"></div>
<div class="formfield"><button class="del">-</button></div>
</div>
</div>
<div class="edit-area">
<div class="controls">
<button class="add">+</button>
<button class="rem">-</button>
</div>
</div>
This works by first grabbing the row template out of the hidden div element, and storing it in a variable. Each time it needs to make a new row, it clones the template and updates it. It updates it by adjusting the name element as required, appending "_" and a number. Once it has customized this copy of the template, it appends it to the edit area.
You can remove elements with a reference to the parent using similar syntax with the following:
var childElement = document.getElementById("myChildElement");
document.getElementById("myElement").removeChild(childElement);
Similar to what is described here: http://www.w3schools.com/js/js_htmldom_nodes.asp
Also, consider a toggle on the CSS style property: "display: none;"