Skip to content

Instantly share code, notes, and snippets.

@endigo9740

endigo9740/gist:2026863

Created March 13, 2012 04:57
Show Gist options
  • Save endigo9740/2026863 to your computer and use it in GitHub Desktop.
Save endigo9740/2026863 to your computer and use it in GitHub Desktop.
Download ZIP
Jquery: Add/Remove Elements
Raw
gistfile1
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Jquery Add/Remove Elements</title>
<style>
*{margin: 0; padding: 0;}
html {background: #CCC; font-family:Helvetica,Arial,sans-serif;}
body {width: 1024px; margin: 50px auto;}
h1 {float: left;}
a {text-decoration: none;}
form {clear: both;}
section {background: #fff; padding: 10px; margin-bottom: 10px; height: 90px;}
.addApp {background: #DDD; color: #000; display: inline-block; float: right; margin-bottom: 10px; padding: 5px;}
.addApp:hover {background: #000; color: #FFF;}
.removeApp {color: #999; display: inline-block; font-size: 12px; font-weight: bold; float: right; padding: 5px;}
.templateHide {display: none;}
</style>
</head>
<body>
<h1>Add/Remove Elements</h1>
<a href="#" class="addApp">Add New App</a>
<form action="" id="formName">
<section>
<a href="#" class="removeApp">X</a>
<h2>App Title 1</h2>
<input type="text" value="box1"><br>
<input type="text" value="box2"><br>
<input type="text" value="box3">
</section>
<section>
<a href="#" class="removeApp">X</a>
<h2>App Title 2</h2>
<input type="text" value="box1"><br>
<input type="text" value="box2"><br>
<input type="text" value="box3">
</section>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</form>
<!-- Hidden Template -->
<section class="templateHide">
<a href="#" class="removeApp">X</a>
<h2>Customize New App</h2>
<input type="text" value="add details for box1..."><br>
<input type="text" value="add details for box2..."><br>
<input type="text" value="add details for box3...">
</section>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script>
(function(){
// Add App
$('.addApp').on('click', function(e){
e.preventDefault();
$('.templateHide').clone().prependTo('form').slideDown('slow').removeClass();
});
// Remove App
$('.removeApp').live('click', function(e){
e.preventDefault();
if (confirm("Permanently delete this app?") == true){
$(this).parent().animate({height: '0', opacity: '0'}, function(){ // Add IE Opacity
$(this).remove();
});
}
});
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment