In my code, there are three fields which are dynamically added by jQuery. For adding fields, my code is working fine, but when I want to remove those dynamically added fields, my remove fields code is not working.
Here is my code:
function clone_row() {
$('#add_more_fields').before('<div class="new_field"><div class="uk-grid" data-uk-grid-margin><div class="uk-width-medium-1-1"><div class="parsley-row"><label for="site Type">Product <span class="req">*</span></label><input type="text" name="product_require[]" data-parsley-trigger="change" required class="md-input" /></div></div>
<div class="uk-width-medium-1-1"><div class="parsley-row"><labelfor="site_area">Quantity<span class="req">*</span></label><input type="text" name="quantity[]" data-parsley-trigger="change" required class="md-input" /><input type="hidden" name="numb_array[]" value="0" class="form-control array-class" /></div></div>
<div class="uk-width-medium-1-1"><div class="parsley-row"><select id="select_demo_1" name="quantity_type[]" class="md-input"id="val_select" required data-md-selectize><option value="">Select Quantity Type</option><option value="Cubic Yard">Cubic Yard</option><option value="Ton">Ton</option><option value="Piece">Piece</option></select></div></div></div><div class="uk-grid">
<div class="uk-width-1-1"><div class="parsley-row"><button type="button" onclick="close_me(this)"; class="md-btn md-btn-primary pull-right">remove</button></br></div></div></div></div></div> ');
}
function close_me(me) {
$(me).parent('new_field').remove();
}
Try this
<script>
function close_me(me)
{
$(document).find('.new_field').remove();
}
</script>
There are slight syntax errors:
onclick="close_me(this)"; -> onclick="close_me(this);"
$(me).parent('new_field').remove(); -> $(me).parent('.new_field').remove();
You are missing the dot to specify the parent class you're searching for. Also there is a typo into your html clone_row() function.
Here is correct the answer : https://jsfiddle.net/5ufsfLz1/7/
function clone_row() {
$('#add_more_fields').before('<div class="new_field"><div class="uk-grid" data-uk-grid-margin><div class="uk-width-medium-1-1"><div class="parsley-row"><label for="site Type">Product <span class="req">*</span></label><input type="text" name="product_require[]" data-parsley-trigger="change" required class="md-input" /></div></div><div class="uk-width-medium-1-1"><div class="parsley-row"><label for="site_area">Quantity<span class="req">*</span></label><input type="text" name="quantity[]" data-parsley-trigger="change" required class="md-input" /><input type="hidden" name="numb_array[]" value="0" class="form-control array-class" /></div></div><div class="uk-width-medium-1-1"><div class="parsley-row"><select id="select_demo_1" name="quantity_type[]" class="md-input" id="val_select" required data-md-selectize><option value="">Select Quantity Type</option><option value="Cubic Yard">Cubic Yard</option><option value="Ton">Ton</option><option value="Piece">Piece</option></select></div></div></div><div class="uk-grid"><div class="uk-width-1-1"><div class="parsley-row"><button type="button" onclick="close_me(this)" ; class="md-btn md-btn-primary pull-right">remove</button><br></div> </div> </div></div>');
}
function close_me(me) {
$(me).parents('.new_field').remove();
}
With the correct HTML :
<div class="new_field">
<div class="uk-grid" data-uk-grid-margin>
<div class="uk-width-medium-1-1">
<div class="parsley-row">
<label for="site Type">Product <span class="req">*</span></label>
<input type="text" name="product_require[]" data-parsley-trigger="change" required class="md-input" />
</div>
</div>
<div class="uk-width-medium-1-1">
<div class="parsley-row">
<label for="site_area">Quantity<span class="req">*</span></label>
<input type="text" name="quantity[]" data-parsley-trigger="change" required class="md-input" />
<input type="hidden" name="numb_array[]" value="0" class="form-control array-class" />
</div>
</div>
<div class="uk-width-medium-1-1">
<div class="parsley-row">
<select id="select_demo_1" name="quantity_type[]" class="md-input" id="val_select" required data-md-selectize>
<option value="">Select Quantity Type</option>
<option value="Cubic Yard">Cubic Yard</option>
<option value="Ton">Ton</option>
<option value="Piece">Piece</option>
</select>
</div>
</div>
</div>
<div class="uk-grid">
<div class="uk-width-1-1">
<div class="parsley-row">
<button type="button" onclick="close_me(this)" ; class="md-btn md-btn-primary pull-right">remove</button>
<br>
</div>
</div>
</div>
</div>
<div id="add_more_fields">
</div>
<a id="more" href="#" onClick="clone_row()">Click me</a>
Related
<div class="content">
<div class="row" style="margin-top: 27px;">
<div class="col-sm-2" style="width: 13%;">
<select id = "app" class="form_input_box">
<option value="" selected="selected">App</option>
</select>
</div>
<div class="col-sm-2" style="margin-left: -25px;width: 11%;">
<select id = "app or not" class="form_input_box">
<option value="" selected="selected" hidden>App Type</option>
<option value="" selected>App Type</option>
<option value="1">App</option>
<option value="2">Not a App</option>
</select>
</div>
<div class="col-sm-2" style="margin-left: -25px;">
<select id = "dept" class="form_input_box">
<option value="" selected="selected">Department</option>
</select>
</div>
<div class="col-sm-1" style="margin-left: -25px;width: 12%;">
<input type="text" name="date_box" id="date_box" class="form_input_box filter_date" Placeholder="Created Date">
</div>
<div class="col-sm-2" style="margin-left: -25px;width: 11%;">
<input type="text" name="search" id="search" class="form_input_box" Placeholder="Search">
</div>
<div class="col-sm-1" style="margin-left: -25px;">
<button id="erase" class="form-control btn btn-primary" name="erase">Clear values</button>
</div>
<div class="row">
<div class="col-sm-1">
<input type="month" id="month" name="month" class="form_input_box" placeholder="Month">
</div>
<div class="col-sm-2" style="right: 30px">
<button type="button" name="report" id="file" class="button">Report file</button>
</div>
</div>
</div>
</div>
i have html page with buttons drop downs like above i need to set a single button when i click on the button it will show all these things if i again click then these need to be hided how can i achieve this.
To solve the problem simply you could use javascript or jquery and hide or show the options based on the selected values...
$('idoption').hide();
$('idoption').show();
My project contains index.blade.php and create.blade.php.
In create.blade.php is a form for creating divs that are listed in the index.blade.php, through the form I need to pass the background-color for each div made, options red, yellow and green color.
My create.blade.php code:
<form action="{{url('warehouse')}}" method="post">
#csrf
<label for="name" style="padding-right:20px">Name</label>
<input type="text" id="name" name="name" style="padding-right:50px; margin-bottom:10px" placeholder="Name"><br>
<label for="supplier" style="padding-right:2px">Supplier</label>
<input type="text" id="supplier" name="supplier" style="padding-right:50px; margin-bottom:10px"
placeholder="Supplier"><br>
<label for="type" style="padding-right:28.5px">Type</label>
<input type="text" id="type" name="type" style="padding-right:50px; margin-bottom:10px" placeholder="Type"><br>
<label for="url" style="padding-right:41.8px">Url</label>
<input type="text" id="url" name="url" style="padding-right:50px; margin-bottom:10px" placeholder="Url"><br>
<label for="color">Color</label>
<select id="selector" name="color">
<option value="" disabled selected hidden>Please Choose...</option>
<option value="green">Green (ready for sale)</option>
<option value="yellow">Yellow (in progress)</option>
<option value="red">Red (new)</option>
</select>
<br>
<button type="submit" id="kreiraj_dugme_create" onclick="selectBackground()">Create/button>
And my index.blade.php code:
#foreach ($warehouses as $key => $warehouse)
<div class="brder1" draggable="true" ondragstart="drag(event,{{$key}})" id="{{$key}}">
<h1 class="ime_palete">{{$warehouse->name}}</h1>
<a class="link_palete" href="{{$warehouse->url}}" target="_blank">Link</a>
<a class="edit_palete" href="{{url("warehouse/".$warehouse->id."/edit")}}">Edit</a>
<a class="show_pallet" href="{{url("warehouse/".$warehouse->id)}}">Show</a>
<form action="{{url("warehouse/".$warehouse->id)}}" method="post">
#csrf
#method('DELETE')
<button type="submit" class="izbrisiDugme" onclick="remove()">Remove</button>
</form>
</div>
#endforeach
</div>
<a class="create_palete" href="{{url("warehouse/create")}}">Create</a>
All I need is to set background-color from options to div brder1
You probably need to do something like this
with jQuery:
$("#selector").change(function(){
$(".brder1").css('background-color', $(this).val());
});
You can place the code within document ready. So snippet will look like as follows
$(document).ready(function(){
$("#selector").change(function(){
$(".brder1").css('background-color', $(this).val());
});
});
I want to add dynamic form fields in the database using PHP. I have used angular to add dynamic form fields. The thing is when I am trying to insert this data into the database only last form field is inserting in the database. SO, I used array and loop to increment and update this form field into the database. but somehow query is not working properly and data is also not inserting into the database. can you tell me what is wrong here? I am stuck. Please help. Thanx in advance.
Here is my code:
<form method="post">
<div class="form-group " >
<input type="text" placeholder="Campaign Name" class="form-control c-square c-theme input-lg" name="camp_name"> </div>
<div class="row col-md-12">
<div class="form-group col-md-6">Start Date
<input type="date" placeholder="start date" class="form-control c-square c-theme input-lg" name="start_date">
</div>
<div class="form-group col-md-6">End Date
<input type="date" placeholder="end date" class="form-control c-square c-theme input-lg" name="end_date"> </div>
</div>
<div class="row col-md-12">
<div class="form-group">
<label for="inputPassword3" class="col-md-8 control-label">Select Store</label>
<div class="col-md-6 c-margin-b-20">
<select class="form-control c-square c-border-2px c-theme" multiple="multiple" name="store">
<option value="1">All Stores</option>
<option value="2">Phoenix Mall</option>
<option value="3">1MG Mall</option>
<option value="4">Orion Mall</option>
</select>
</div>
</div>
</div>
<div class="row col-md-12" ng-app="angularjs-starter" ng-controller="MainCtrl">
<fieldset data-ng-repeat="choice in choices">
<label for="inputPassword3" class="col-md-1 control-label">Elements</label>
<div class="form-group col-md-3 ">
<input type="text" placeholder="Campaign Name" ng-model="choice.name" class="form-control c-square c-theme input-lg" name="ele">
</div>
<label for="inputPassword3" class="col-md-1 control-label">Quantity</label>
<div class="form-group col-md-3" >
<select class="form-control c-square c-border-2px c-theme" name="store">
<option value="1">All Stores</option>
<option value="2">Phoenix Mall</option>
<option value="3">1MG Mall</option>
<option value="4">Orion Mall</option>
</select>
</div>
<button class="btn c-theme-btn c-btn-uppercase btn-lg c-btn-bold c-btn-square" ng-click="addNewChoice()" >add</button>
<button ng-show="$last" ng-click="removeChoice()" class="btn c-theme-btn c-btn-uppercase btn-lg c-btn-bold c-btn-square" >Remove</button>
</fieldset>
</div>
</div>
</div>
<div class="form-group">
<input type="text" placeholder="Description" class="form-control c-square c-theme input-lg" name="description">
</div>
<input class="btn c-theme-btn c-btn-uppercase btn-lg c-btn-bold c-btn-square" value="Submit" type="submit">
</form>
// angular script
<script type="text/javascript">
var app = angular.module('angularjs-starter', []);
app.controller('MainCtrl', function($scope) {
$scope.choices = [{id: 'choice1'}, {id: 'choice2'}];
$scope.addNewChoice = function() {
var newItemNo = $scope.choices.length+1;
$scope.choices.push({'id':'choice'+newItemNo});
};
$scope.removeChoice = function() {
var lastItem = $scope.choices.length-1;
$scope.choices.splice(lastItem);
};
});
</script>
What you can do is simply take input type and put its type="button". It won't refresh your page. You were not specifying any type that's why it was taking type="submit" and the whole page was reloading. So avoid this.
Try this :
<button type="button" class="btn c-theme-btn c-btn-uppercase btn-lg c-btn-bold
c-btn-square" ng-click="addNewChoice()"> add</button>
You should always specify button type, otherwise, it will take submit by default and that's why it is refreshing the page.
Hope this helps
I've been trying to solve this one for several days now and it's driving me nuts. I have some data that needs to be submitted by Ajax. It is dynamic, so I don't know how many fields it has. On top of that the names of the fields are multidimensional and also dynamic. For example one might have inputs with the name data[name] and data[title] whilst another larger one might have data[images][0][src], data[images][0][alt], data[images][0][description], data[images][1][src], data[images][1][alt], data[images][1][description] with an unknown number of elements to the array. My problem is that I need to get an object I can submit via Ajax whilst maintaining the structure of the data.
I've tried serialising the data, but that just comes up with a string of name = value. I've tried serialise array as well, but that just gives me an array of [name, value]. I've managed to generate the object manually using a regex to split it up, but I can't find a way to merge the resultant objects together. The latest version of my code is:
$('.modal-content').find('input[name^="data"]').each(function () {
var found = $(this).attr('name').match(re).reverse();
var temp = $(this).val();
$.each(found, function ()
{
str = this.substr(1, this.length - 2);
var t = {};
t[str] = temp;
temp = t;
});
data = $.each({}, data, temp);
});
Unfortunately it doesn't merge them, it overwrites what is in data with what is in temp. If data has data.images[0].src = "mysrc" and temp has data.images[0].alt = "myalt" then I just end up with data.images[0].alt = "myalt" and src is no longer there.
There has to be a simple way to do this, hell at this point I'd even take a complicated way to do this. Can someone please help me with this?
Although there is already an accepted answer. Here are my 5 cents:
IMHO working with regex should be avoided when possible. So my suggestion would be to change the HTML a bit, adding some classes to the div that contain the image and change the name attribute of the inputs:
<li class="col-xs-12 col-sm-6 col-md-4 col-lg-3 gallery-image ui-sortable-handle">
<div class="my-image">
<img src="http://localhost:8000/img/example.jpg">
<input type="hidden" name="src" value="img/example.jpg">
<div class="form-group">
<label for="title-0">Title:</label>
<input type="text" name="title" class="form-control" id="title-0" value="Default Example Image 1" placeholder="Title">
</div>
<div class="form-group">
<label for="description-0">Description:</label>
<input type="text" name="description" class="form-control" id="description-0" value="A default example image." placeholder="Description">
</div>
<div class="form-group">
<label for="alt-0">Alt tag (SEO):</label>
<input type="text" name="alt" class="form-control" id="alt-0" value="fluid gallery example image" placeholder="Alt tag">
</div>
<div class="form-group">
<label for="order-0">Order:</label>
<input type="number" name="order" class="form-control image-order" id="order-0" value="0">
</div>
<button type="button" class="btn btn-danger remove-gallery-image-btn">× Delete</button>
</div>
</li>
<li class="col-xs-12 col-sm-6 col-md-4 col-lg-3 gallery-image ui-sortable-handle">
<div class="my-image">
<img src="http://localhost:8000/img/example.jpg">
<input type="hidden" name="src" value="img/example.jpg">
<div class="form-group">
<label for="title-1">Title:</label>
<input type="text" name="title" class="form-control" id="title-1" value="Default Example Image 2" placeholder="Title">
</div>
<div class="form-group">
<label for="description-1">Description:</label>
<input type="text" name="description" class="form-control" id="description-1" value="A default example image." placeholder="Description">
</div>
<div class="form-group">
<label for="alt-1">Alt tag (SEO):</label>
<input type="text" name="alt" class="form-control" id="alt-1" value="fluid gallery example image" placeholder="Alt tag">
</div>
<div class="form-group">
<label for="order-1">Order:</label>
<input type="number" name="order" class="form-control image-order" id="order-1" value="1">
</div>
<button type="button" class="btn btn-danger remove-gallery-image-btn">× Delete</button>
</div>
</li>
Then build the object matching this class:
var obj = {
data: {
images: []
}
}
var groups = $('.my-image');
groups.each(function(idx, el) {
var child = {}
$(el).find('input').each(function(jdx, info){
var $info = $(info);
child[$info.attr('name')] = $info.val();
});
obj.data.images.push(child);
});
We would have the same result, but it might be less error prone. Here is a plunker.
You can loop all inputs with each() loop, create array from name attributes using split() and then use reduce to add to object
var result = {}
$('input').each(function() {
var name = $(this).attr('name');
var val = $(this).val();
var ar = name.split(/\[(.*?)\]/gi).filter(e => e != '');
ar.reduce(function(a, b, i) {
return (i != (ar.length - 1)) ? a[b] || (a[b] = {}) : a[b] = val;
}, result)
})
console.log(result)
.as-console-wrapper { max-height: 100% !important; top: 0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="gallery-images" class="ui-sortable">
<li class="col-xs-12 col-sm-6 col-md-4 col-lg-3 gallery-image ui-sortable-handle">
<div>
<img src="http://localhost:8000/img/example.jpg">
<input type="hidden" name="data[images][0][src]" value="img/example.jpg">
<div class="form-group">
<label for="title-0">Title:</label>
<input type="text" name="data[images][0][title]" class="form-control" id="title-0" value="Default Example Image 1" placeholder="Title">
</div>
<div class="form-group">
<label for="description-0">Description:</label>
<input type="text" name="data[images][0][description]" class="form-control" id="description-0" value="A default example image." placeholder="Description">
</div>
<div class="form-group">
<label for="alt-0">Alt tag (SEO):</label>
<input type="text" name="data[images][0][alt]" class="form-control" id="alt-0" value="fluid gallery example image" placeholder="Alt tag">
</div>
<div class="form-group">
<label for="order-0">Order:</label>
<input type="number" name="data[images][0][order]" class="form-control image-order" id="order-0" value="0">
</div>
<button type="button" class="btn btn-danger remove-gallery-image-btn">× Delete</button>
</div>
</li>
<li class="col-xs-12 col-sm-6 col-md-4 col-lg-3 gallery-image ui-sortable-handle">
<div>
<img src="http://localhost:8000/img/example.jpg">
<input type="hidden" name="data[images][1][src]" value="img/example.jpg">
<div class="form-group">
<label for="title-1">Title:</label>
<input type="text" name="data[images][1][title]" class="form-control" id="title-1" value="Default Example Image 2" placeholder="Title">
</div>
<div class="form-group">
<label for="description-1">Description:</label>
<input type="text" name="data[images][1][description]" class="form-control" id="description-1" value="A default example image." placeholder="Description">
</div>
<div class="form-group">
<label for="alt-1">Alt tag (SEO):</label>
<input type="text" name="data[images][1][alt]" class="form-control" id="alt-1" value="fluid gallery example image" placeholder="Alt tag">
</div>
<div class="form-group">
<label for="order-1">Order:</label>
<input type="number" name="data[images][1][order]" class="form-control image-order" id="order-1" value="1">
</div>
<button type="button" class="btn btn-danger remove-gallery-image-btn">× Delete</button>
</div>
</li>
<li class="col-xs-12 col-sm-6 col-md-4 col-lg-3 gallery-image ui-sortable-handle">
<div>
<img src="http://localhost:8000/uploads/galleries\21\4-tux-30.jpg">
<input type="hidden" name="data[images][2][src]" value="uploads/galleries\21\4-tux-30.jpg">
<div class="form-group">
<label for="title-2">Title:</label>
<input type="text" name="data[images][2][title]" class="form-control" id="title-2" value="" placeholder="Title">
</div>
<div class="form-group">
<label for="description-2">Description:</label>
<input type="text" name="data[images][2][description]" class="form-control" id="description-2" value="" placeholder="Description">
</div>
<div class="form-group">
<label for="alt-2">Alt tag (SEO):</label>
<input type="text" name="data[images][2][alt]" class="form-control" id="alt-2" value="" placeholder="Alt tag">
</div>
<div class="form-group">
<label for="order-2">Order:</label>
<input type="number" name="data[images][2][order]" class="form-control image-order" id="order-2" value="2">
</div>
<button type="button" class="btn btn-danger remove-gallery-image-btn">× Delete</button>
</div>
</li>
<li class="col-xs-12 col-sm-6 col-md-4 col-lg-3 gallery-image ui-sortable-handle">
<div>
<img src="http://localhost:8000/uploads/galleries\21\all-free-backgrounds-simple-style-darkblue-18.jpg">
<input type="hidden" name="data[images][3][src]" value="uploads/galleries\21\all-free-backgrounds-simple-style-darkblue-18.jpg">
<div class="form-group">
<label for="title-3">Title:</label>
<input type="text" name="data[images][3][title]" class="form-control" id="title-3" value="" placeholder="Title">
</div>
<div class="form-group">
<label for="description-3">Description:</label>
<input type="text" name="data[images][3][description]" class="form-control" id="description-3" value="" placeholder="Description">
</div>
<div class="form-group">
<label for="alt-3">Alt tag (SEO):</label>
<input type="text" name="data[images][3][alt]" class="form-control" id="alt-3" value="" placeholder="Alt tag">
</div>
<div class="form-group">
<label for="order-3">Order:</label>
<input type="number" name="data[images][3][order]" class="form-control image-order" id="order-3" value="3">
</div>
<button type="button" class="btn btn-danger remove-gallery-image-btn">× Delete</button>
</div>
</li>
</ul>
EDIT 001:
added:
- event.preventDefault(); and anchors instead of buttons
<div class="edit-area">
<div class="controls">
+
-
</div>
</div>
Now the page +or -won't make the page send the form, but now it does nothing :s
I'm working on a contact form, but I have a few problems/questions.
I want to dynamically add fields when they press a button (+)
And off course they need to be able to delete this when needed... (-)
When I press the + button now, it tries to act like a submit button and sends the form...
Script
<script>
(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('[project]').attr('project', function() {
return $(this).attr('project') + '_' + 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));
</script>
HTML
<form action="<? echo $_SERVER['PHP_SELF']; ?>" method="POST" name="contact">
<div class="row uniform 50%">
<div class="6u 12u(mobilep)">
Your personal card number
<input type="text" name="card2" id="card" value="<?php echo $_SESSION['username']; ?>" placeholder="Card Number" readonly/>
</div>
<div class="6u 12u(mobilep)">
Your name
<input type="text" name="name2" id="name" value="<?php echo $_SESSION['realName']; ?>" placeholder="Your name" readonly/>
</div>
</div>
<div class="row uniform 50%">
<div class="6u 12u(narrower)">
Order tickets for a project.
</div>
</div>
<div class="example-template">
<div class="row uniform 50%" id="readroot">
<div class="4u 12u(narrower)">
<select name="project" id="ddl" onchange="configureDropDownLists(this,document.getElementById('ddl2'))">
<option disabled selected>Select a project</option>
<option value="Smile">Project Smile</option>
<option value="Sand">Project Sand</option>
<option value="Schmuck">Project Schmuck</option>
</select>
</div>
<div class="4u 12u(narrower)">
<select id="ddl2" name="date">
<option disabled selected>Select a date</option>
</select>
</div>
<div class="2u 12u(narrower)">
<input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' name="amount" id="currentamount" value="" placeholder="Amount" />
</div>
</div>
<div class="edit-area">
<div class="controls">
<button class="add">+</button>
<button class="rem">-</button>
</div>
</div>
<div class="row uniform 50%">
<div class="6u 12u(mobilep)">
<input type="hidden" id="currentprice" value="10" />
</div>
</div>
<div class="6u 12u(mobilep)">
<input type="hidden" id="nextprice1" value="10" placeholder="" />
</div>
</div>
<div class="row uniform">
<div class="12u">
</div>
</div>
<div class="4u 12u(mobilep)">
Total price.(In EUR)
<input type="text" name="total2" id="total" value="" readonly/>
</div>
<div class="row uniform">
<div class="12u">
<ul class="actions align-center">
<li><input type="submit" name="submit"value="Place Order"/></li>
</ul>
</div>
</div>
</form>
Image of the form (id and name are not shown here)
Change your buttons to anchors:
+
-
And then in your javascript, when clicked, be sure to call preventDefault() to stop it from behaving like a standard link.
$(document).on('click', '.edit-area .rem', function(event) {
event.preventDefault();
editArea.children('.example-template').last().remove();
});
$(document).on('click', '.edit-area .del', function(event) {
event.preventDefault();
var target = $(event.target),
row = target.closest('.example-template');
row.remove();
});
I think alternatively, you can add a type to the button so it doesn't default to a submit type (but don't quote me on that):
<button type="button" class="add">+</button>