JQuery Add and Remove Items

Developer
Brock Nunn
Size
4,085 Kb
Views
8,096
  1. JQuery Add and Remove Items Previews
  2. JQuery Add and Remove Items HTML Codes
  3. JQuery Add and Remove Items CSS Codes
  4. JQuery Add and Remove Items JS Codes

How do I make an jquery add and remove items?

Add and Remove a list of content items using simple jQuery. Looking to add media query layout breaks once a certain number of items have been added in the future. . What is a jquery add and remove items? How do you make a jquery add and remove items? This script and codes were developed by Brock Nunn on 06 January 2023, Friday.

JQuery Add and Remove Items Previews
IQ Test

JQuery Add and Remove Items - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>jQuery Add and Remove Items</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="main"> <button class="btn addr"><span class="fa fa-plus-circle"></span>Add Content</button> <button class="btn removr"><span class="fa fa-minus-circle"></span>Remove Content</button> <div class="card"> <h1>This is a Title</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto vitae ipsa quibusdam odio sapiente ullam qui libero commodi blanditiis ut at voluptatibus! Iusto aliquam facilis.</p> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

JQuery Add and Remove Items - Script Codes CSS Codes

.gradient { background: #595959; /* Old browsers */ background: -moz-linear-gradient(top, #595959 0%, #2b2b2b 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #595959), color-stop(100%, #2b2b2b)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #595959 0%, #2b2b2b 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #595959 0%, #2b2b2b 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #595959 0%, #2b2b2b 100%); /* IE10+ */ background: linear-gradient(to bottom, #595959 0%, #2b2b2b 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#595959', endColorstr='#2b2b2b', GradientType=0); /* IE6-9 */
}
.gradient-light { background: #666666; /* Old browsers */ background: -moz-linear-gradient(top, #666666 0%, #3c3c3c 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #666666), color-stop(100%, #3c3c3c)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #666666 0%, #3c3c3c 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #666666 0%, #3c3c3c 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #666666 0%, #3c3c3c 100%); /* IE10+ */ background: linear-gradient(to bottom, #666666 0%, #3c3c3c 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#3c3c3c', GradientType=0); /* IE6-9 */
}
.gradient-reverse { background: #393939; /* Old browsers */ background: -moz-linear-gradient(top, #393939 0%, #616161 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #393939), color-stop(100%, #616161)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #393939 0%, #616161 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #393939 0%, #616161 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #393939 0%, #616161 100%); /* IE10+ */ background: linear-gradient(to bottom, #393939 0%, #616161 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#393939', endColorstr='#616161', GradientType=0); /* IE6-9 */
}
body { background: #212121;
}
.main { width: 85%; margin: 0 auto;
}
.card { padding: 2.5rem; background: #eaeaea; margin: 2.5rem 0; border: 1px solid #111; box-shadow: 0 1rem 1rem #000; border-radius: .25rem; border-bottom: .5rem solid #d1d1d1;
}
.card h1 { margin-top: 0; line-height: 1.55rem; color: #686666; font-weight: 800; border-bottom: 1px dashed rgba(0, 0, 0, 0.08); padding-bottom: 1.5rem;
}
.card p { margin-bottom: 0; line-height: 1.55rem; color: #666; font-weight: 200; letter-spacing: .5px;
}
.btn { position: relative; color: #fff; background: #111; background: #595959; /* Old browsers */ background: -moz-linear-gradient(top, #595959 0%, #2b2b2b 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #595959), color-stop(100%, #2b2b2b)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #595959 0%, #2b2b2b 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #595959 0%, #2b2b2b 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #595959 0%, #2b2b2b 100%); /* IE10+ */ background: linear-gradient(to bottom, #595959 0%, #2b2b2b 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#595959', endColorstr='#2b2b2b', GradientType=0); /* IE6-9 */ display: inline-block; padding: .75rem 1rem; margin-top: 1rem; font-size: .75rem; border: 1px solid #000; text-decoration: none; color: #000; text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.18); box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.2); border-radius: .25rem; font-weight: bold; text-transform: uppercase;
}
.btn:focus { outline: none;
}
.btn:nth-of-type(1) { margin-right: 1rem;
}
.btn:hover { background: #666666; /* Old browsers */ background: -moz-linear-gradient(top, #666666 0%, #3c3c3c 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #666666), color-stop(100%, #3c3c3c)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #666666 0%, #3c3c3c 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #666666 0%, #3c3c3c 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #666666 0%, #3c3c3c 100%); /* IE10+ */ background: linear-gradient(to bottom, #666666 0%, #3c3c3c 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#3c3c3c', GradientType=0); /* IE6-9 */
}
.btn:active { background: #393939; /* Old browsers */ background: -moz-linear-gradient(top, #393939 0%, #616161 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #393939), color-stop(100%, #616161)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #393939 0%, #616161 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #393939 0%, #616161 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #393939 0%, #616161 100%); /* IE10+ */ background: linear-gradient(to bottom, #393939 0%, #616161 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#393939', endColorstr='#616161', GradientType=0); /* IE6-9 */ top: 1px;
}
.btn span.fa { margin-right: .5rem; font-size: 1.25rem; position: relative; line-height: .5rem; top: .2rem;
}

JQuery Add and Remove Items - Script Codes JS Codes

var $content = "<div class='card'>"+"<h1>This is a Title</h1>"+"<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto vitae ipsa quibusdam odio sapiente ullam qui libero commodi blanditiis ut at voluptatibus! Iusto aliquam facilis.</p>"+"</div>"
$(document).ready(function(){ $('.addr').click(function(){ $($content).appendTo( ".main" ).hide().fadeIn(); }); $('.removr').click(function(){ $('.card:last-child').fadeOut().remove(); });
});
JQuery Add and Remove Items - Script Codes
JQuery Add and Remove Items - Script Codes
Home Page Home
Developer Brock Nunn
Username banunn
Uploaded January 06, 2023
Rating 3
Size 4,085 Kb
Views 8,096
Do you need developer help for JQuery Add and Remove Items?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Brock Nunn (banunn) Script Codes
Name
Learning Flexbox
Article Cards
Super Simple Slideshow
Simple Login Form Template
Modern Web Button
Flat UI Alert
A Pen by Brock Nunn
Tooltip Pulse
Simple Article Layout
Simple Responsive Navigation
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!