Making a button appear on scroll with Javascript / jQuery - javascript

The button already has Javascript this is why I'm including it below - this code is separate to my question though. This is to change the button into something else ON CLICK - I want to keep the button hidden, until scroll... Looked all over and I'm unable to find the right way. (very new to JS).. and whenever I fiddle with the code it's breaking the JS which is why I'm seeking help.. it would be greatly appreciated.
$(document).ready(function() {
$("#mydiv").hide();
$("#show").click(function() {
$("#mydiv").toggle();
$("#show").toggle();
});
$("#hide").click(function() {
$("#mydiv").hide();
$("#show").show();
});
});
#mydiv {
position: fixed;
bottom: 0;
left: 0;
width: 360px;
}
.btn-purple {
width: 360px;
background: #721a71;
color: #fff;
padding: 10px;
position: fixed;
bottom: 0;
left: 0;
}
.myheader {
background: #721a71;
color: #fff;
padding: 10px;
}
.mybody {
background: #f5f5f5;
padding: 10px;
}
<div class="btn btn-purple" id="show">
Get in touch <i class="fa fa-angle-up pull-right" aria-hidden="true" style="color:#fff; font-weight:bolder; font-size:20px;"></i>
</div>
<div id="mydiv">
<div class="myheader text-center">
Get in touch <i id="hide" class="fa fa-angle-down pull-right" aria-hidden="true" style="color:#fff; font-weight:bolder; font-size:20px;"></i>
</div>
<div class="mybody">
<p class="d-none d-md-block">Number: <a class="external" href="#">01522 123456</a></p>
<p class="d-none d-md-block">Email: <a class="external" href="#">example#example.co.uk</a></p>
<p class="d-none d-md-block">Bookings: <a class="external" href="#">booking.example.co.uk</a></p>
<p class="d-md-none"><a class="btn btn-primary btn-block mt-4 mb-4" href="#">Call <span class="fa fa-phone" aria-hidden="true"></span></a></p>
<p class="d-md-none"><a class="btn btn-primary btn-block mt-4 mb-4" href="#">Email <span class="fa fa-envelope" aria-hidden="true"></span></a></p>
<p class="d-md-none"><a class="btn btn-primary btn-block mt-4 mb-4" href="#">Book <span class="fa fa-sign-in" aria-hidden="true"></span></a></p>
</div>
</div>


You need to attach a scroll function to the window if you want to show your div on scroll Jquery Scroll. Then the easiest way if you are not that familiar with javascript is to just add a class and control everything else with css. So you can just do something like the following:
$(window).scroll(function(){
$('#show').addClass('scrolled', $(this).scrollTop() > 100);
});
This will add the class of scrolled when the window reaches 100px. If you want it to also remove the class when it goes back up instead of using addCLass you can just switch that to toggleClass and it will remove it as well.
So here it is:
$(document).ready(function() {
$("#mydiv").hide();
$("#show").click(function() {
$("#mydiv").toggle();
$("#show").toggle();
});
$("#hide").click(function() {
$("#mydiv").hide();
$("#show").show();
});
});
$(window).scroll(function(){
$('#show').addClass('scrolled', $(this).scrollTop() > 100);
});
body{
height:300vh;
}
#mydiv {
position: fixed;
bottom: 0;
left: 0;
width: 360px;
}
.btn-purple {
width: 360px;
background: #721a71;
color: #fff;
padding: 10px;
position: fixed;
bottom: 0;
left: 0;
opacity:0;
transition:opacity 1000ms ease-in-out;
}
.btn-purple.scrolled{
opacity:1;
}
.myheader {
background: #721a71;
color: #fff;
padding: 10px;
}
.mybody {
background: #f5f5f5;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn btn-purple" id="show">
Get in touch <i class="fa fa-angle-up pull-right" aria-hidden="true" style="color:#fff; font-weight:bolder; font-size:20px;"></i>
</div>
<div id="mydiv">
<div class="myheader text-center">
Get in touch <i id="hide" class="fa fa-angle-down pull-right" aria-hidden="true" style="color:#fff; font-weight:bolder; font-size:20px;"></i>
</div>
<div class="mybody">
<p class="d-none d-md-block">Number: <a class="external" href="#">01522 123456</a></p>
<p class="d-none d-md-block">Email: <a class="external" href="#">example#example.co.uk</a></p>
<p class="d-none d-md-block">Bookings: <a class="external" href="#">booking.example.co.uk</a></p>
<p class="d-md-none"><a class="btn btn-primary btn-block mt-4 mb-4" href="#">Call <span class="fa fa-phone" aria-hidden="true"></span></a></p>
<p class="d-md-none"><a class="btn btn-primary btn-block mt-4 mb-4" href="#">Email <span class="fa fa-envelope" aria-hidden="true"></span></a></p>
<p class="d-md-none"><a class="btn btn-primary btn-block mt-4 mb-4" href="#">Book <span class="fa fa-sign-in" aria-hidden="true"></span></a></p>
</div>
</div>
If you dont want the transition effect you can instead just use the display property and remove opacity and transition from the css like so:
.btn-purple {
width: 360px;
background: #721a71;
color: #fff;
padding: 10px;
position: fixed;
bottom: 0;
left: 0;
display:none;
}
.btn-purple.scrolled{
display:block;
}


Not 100 percent sure your requirement so I gave you something to start with. I added an element to measure on window scroll that will scroll (first .big) that when off screen a bit will trigger one event and when back on screen shows via another event trigger. I also put some style in the CSS that was in the markup. Note you probably only need one of the hide/show and just need the up/down class thing instead but I left that alone for you.
$(document).ready(function() {
$("#show").on('click', function() {
$("#mydiv").toggle(true);
$("#show").toggle(false);
});
$("#hide").on('click', function() {
$("#mydiv").toggle(false);
$("#show").toggle(true);
});
$(window).on('scroll', function() {
var t = document.getElementsByClassName("big")[0];
var tt = t.getBoundingClientRect().top;
if (tt < -100) { // as soon as its 100px off screen
setTimeout(function() {
$("#show").trigger('click');
}, 1000);
}
if (tt >= 0) { // as soon as its back on screen
setTimeout(function() {
$("#hide ").trigger('click');
}, 1000);
}
});
});
#mydiv {
position: fixed;
bottom: 0;
left: 0;
width: 360px;
display: none;
}
#show>i,
#hide>i {
color: #fff;
font-weight: bolder;
font-size: 20px;
}
.big {
height: 20em;
}
.btn-purple {
width: 360px;
background: #721a71;
color: #fff;
padding: 10px;
position: fixed;
bottom: 0;
left: 0;
}
.myheader {
background: #721a71;
color: #fff;
padding: 10px;
}
.mybody {
background: #f5f5f5;
padding: 10px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="btn btn-purple" id="show">
Get in touch S<i class="fa fa-angle-up pull-right" aria-hidden="true">^^^</i>
</div>
<div id="mydiv">
<div class="myheader text-center">
Get in touch H<i id="hide" class="fa fa-angle-down pull-right" aria-hidden="true">xxx</i>
</div>
<div class="mybody">
<p class="d-none d-md-block">Number: <a class="external" href="#">01522 123456</a></p>
<p class="d-none d-md-block">Email: <a class="external" href="#">example#example.co.uk</a></p>
<p class="d-none d-md-block">Bookings: <a class="external" href="#">booking.example.co.uk</a></p>
<p class="d-md-none"><a class="btn btn-primary btn-block mt-4 mb-4" href="#">Call <span class="fa fa-phone" aria-hidden="true"></span></a></p>
<p class="d-md-none"><a class="btn btn-primary btn-block mt-4 mb-4" href="#">Email <span class="fa fa-envelope" aria-hidden="true"></span></a></p>
<p class="d-md-none"><a class="btn btn-primary btn-block mt-4 mb-4" href="#">Book <span class="fa fa-sign-in" aria-hidden="true"></span></a></p>
</div>
</div>
<div class='big'>make me scroll</div>
<div class='big'>(I just take up space)</div>

Related

css count-increment on every page-break

i have created a header and footer that will only show when the user exports the page, I am trying to add a custom pagination when printing but it does not seem to increment and is stuck with "Page 1", is there a way for the CSS to detect page break? i have a page-break-after: always in one of the components since it usually has more than 1 page when exported. or is it because my footer is in a separate div from the components?
body {
counter-reset: page 1;
}
#media print {
.pagebreak-after {
padding-top: 1rem;
page-break-after: always;
}
.print_footer {
visibility: visible;
position: fixed;
display: flex;
bottom: 2%;
padding: 1rem;
width: 100%;
border-top: 1px solid black;
}
.counter::after {
counter-increment: page;
content: " | Page " counter(page);
}
.adjust_on_print {
margin-top: 3rem !important;
}
.no-print {
display: none;
visibility: hidden;
}
.print_header {
visibility: visible;
position: fixed;
top: 2%;
width: 100%;
border-bottom: 1px solid gray;
}
}
<div class="content">
<div class="row d-flex no-print">
<div v-if="false" class="col d-flex align-items-center">
<a class="nav-link" :href="json_data" :download="file_name">
<button class="btn btn-sm btn-outline-secondary d-flex align-items-center">
<i class="mdi mdi-printer mr-1" /><small>Export</small>
</button>
</a>
</div>
<div class="col d-flex align-items-center">
<button class="btn btn-sm btn-outline-secondary ml-auto d-flex align-items-center" #click.prevent="print_full">
<i class="mdi mdi-printer mr-1" /><small>{{btn_labels.print}}</small>
</button>
</div>
</div>
<ErmittlungDerHochstgrenzen ref="ermit" />
<WeitereBerechnungsgrundlagen class="my-3 pagebreak-after" ref="weitere" />
<ErmittlungAnerkannterHilfebedarf class="adjust_on_print" ref="ermit_annerkanter" />
</div>
<div :class="{'no-print':this.print}">
<div class="print_header">
<p>{{claim_info.Insurance_number}}</p>
<p>{{claim_info.First_name}} {{claim_info.Last_name}}</p>
</div>
<div class="print_footer">
<span class="mr-auto">Footer here</span>
<span class="mx-auto">{{claim_info.First_name}} {{claim_info.Last_name}}</span
>
<span class="ml-auto counter">{{claim_info.Date | moment('L')}}</span>
</div>
</div>

How to add Eventlisteners to all elements of a class but execute it only for a particular element during mouseover?

I've been trying to write a javascript code in which the user will be displayed three options (Purchase, Add to cart, Add to wishlists), whenever they will hover above an image of a book. The problem is that all the options for all the books are shown simultaneously when I hover above any image. Is there any way to display options only for the particular book on which the cursor is over.
let images = document.getElementsByClassName('images');
let options = document.getElementsByClassName('options');
for (const index of options)
{index.style.display = 'none';}
for (index = 0; index < images.length; index++) {
images[index].addEventListener('mouseover', () => {
for (const iterator of options) {
iterator.style.display = 'inline-block';
}
});
}
for (index = 0; index < images.length; index++) {
images[index].addEventListener('mouseout', () => {
for (const iterator of options) {
iterator.style.display = 'none';
}
});
}
.slider {
display: flex;
justify-content: space-between;
margin: 25px 0px;
}
.book {display: inline-block; position: relative;}
.book a {display: block; width: 20vw;}
.info {
display: block;
text-align: center;
text-decoration: none;
color: rgb(90, 90, 90);
font-size: 17px;
font-weight: 500;
transition: color 250ms;
}
.info:hover {color: rgb(255, 0, 0);}
.book a:hover {color: rgb(255, 0, 0);}
.book .info:last-of-type {margin-top: 5px;}
.book_price {text-align: center; margin: 10px 0px;}
.book_price p {
display: inline;
color: rgb(90, 90, 90);
font-size: 17px;
font-weight: 500;
margin: 10px 5px;
}
.book_price span:last-of-type p {color: rgb(255, 0, 0);}
.options {
background-color: rgba(255, 255, 255, 0.7);
display: inline-block;
position: absolute;
bottom: 250px;
right: 62px;
padding: 10px;
}
.options a {
display: inline-block;
color: rgb(90, 90, 90);
font-size: 22px;
padding: 5px 10px;
width: auto;
transition: color 250ms;
}
.options a:nth-of-type(2) {border-right: 1px solid rgb(50, 50, 50); border-left: 1px solid rgb(50, 50, 50);}
<link rel="stylesheet" href="https://kit-pro.fontawesome.com/releases/v5.15.1/css/pro.min.css">
<div class="slider">
<div class="book" class="book_1">
<img src="http://www.cliometrics.com/bbw/images/product/1.png" class="images">
<div class="options">
<i class="fal fa-plus"></i>
<i class="fal fa-shopping-cart"></i>
<i class="fal fa-heart"></i>
</div>
$10,000,000 Marraige Proposal
-James Patterson
<div class="book_price">
<span><del><p>₹200.00</p></del></span>
<span><p>₹160.00</p></span>
</div>
</div>
<div class="book" id="book_2">
<img src="http://www.cliometrics.com/bbw/images/product/2.png" class="images">
<div class="options">
<i class="fal fa-plus"></i>
<i class="fal fa-shopping-cart"></i>
<i class="fal fa-heart"></i>
</div>
How to write your first Book
-Reader's Digest
<div class="book_price">
<span><del><p>₹400.00</p></del></span>
<span><p>₹260.00</p></span>
</div>
</div>
<div class="book" class="book_3">
<img src="http://www.cliometrics.com/bbw/images/product/3.png" class="images">
<div class="options">
<i class="fal fa-plus"></i>
<i class="fal fa-shopping-cart"></i>
<i class="fal fa-heart"></i>
</div>
10,000 Time saving Ideas
-G.H. Miller
<div class="book_price">
<span><del><p>₹300.00</p></del></span>
<span><p>₹150.00</p></span>
</div>
</div>
<div class="book" class="book_4">
<img src="http://www.cliometrics.com/bbw/images/product/4.png" class="images">
<div class="options">
<i class="fal fa-plus"></i>
<i class="fal fa-shopping-cart"></i>
<i class="fal fa-heart"></i>
</div>
10,000 Time saving Ideas
-G.H. Miller
<div class="book_price">
<span><del><p>₹300.00</p></del></span>
<span><p>₹150.00</p></span>
</div>
</div>
<div class="book" class="book_5">
<img src="http://www.cliometrics.com/bbw/images/product/5.png" class="images">
<div class="options">
<i class="fal fa-plus"></i>
<i class="fal fa-shopping-cart"></i>
<i class="fal fa-heart"></i>
</div>
10,000 Time saving Ideas
-G.H. Miller
<div class="book_price">
<span><del><p>₹300.00</p></del></span>
<span><p>₹150.00</p></span>
</div>
</div>
<div class="book" class="book_6">
<img src="http://www.cliometrics.com/bbw/images/product/6.png" class="images">
<div class="options">
<i class="fal fa-plus"></i>
<i class="fal fa-shopping-cart"></i>
<i class="fal fa-heart"></i>
</div>
10,000 Time saving Ideas
-G.H. Miller
<div class="book_price">
<span><del><p>₹300.00</p></del></span>
<span><p>₹150.00</p></span>
</div>
</div>
</div>

You have to use the event object and the attribute target:
for (index = 0; index < images.length; index++) {
images[index].addEventListener('mouseover', (event) => {
for (const iterator of options) {
event.target.style.display = 'inline-block'; // Use event.target
}
});
}

How do I get this Anchor tag to fill the space before the next div?

I have been trying to create a bootstrap drop down box with some additional buttons inside. I have the main functionality sorted but the aesthetics are not quite right.
The issue I am having is that the Anchor elements are not filling the space up to the buttons on the right. I have tried experimenting with different combinations of block and inline-block which I have read elsewhere should fill the space but when it does it pushes the buttons down to the next line. When I do manage to get the buttons and anchor elements on the same line the selection area for the anchor does not extend the entire way up to the buttons.
I am currently tearing my hair out trying to get it to work but am having no luck so if anyone can offer any assistance it will be greatly appreciated.
Update:
Thanks to #Matus Jurika for suggesting using calc to adjust the sizing of the anchor element.
Updated working fiddle: fiddle

I sugget using calc for width:
.anchorDiv {
display: inline-block;
width: calc(100% - 74px);
}
Working Fiddle:
https://jsfiddle.net/q3fra0bm/36/

This here is snippet for your solution. I am just using bootstrap row class.
.comboRow {
margin-bottom: 3px;
}
.comboItem {
display: block !important;
/*width: 67%;*/
}
.comboButtons {
float:right;
margin-top: 3px;
width: 74px;
display: block;
}
.comboItemContainer {
width: 100%;
display: inline-block;
}
.anchorDiv {
display: inline-block;
}
.close {
/*float: right;*/
/*margin-right: 10px;*/
}
.close .edit {
margin-right: 5px;
}
#presetDropdownButton {
position:absolute;
}
.glyphicon {
font-size: 15px;
}
#presetDropdown {
width: max-content;
}
#newPresetEntry {
width: 50%;
height: 24px;
margin-left: 18px;
padding-left: 6px;
padding-right: 6px;
}
.dropdown-menu > li > div > div > a {
padding: 3px 20px;
clear: both;
font-weight: 400;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
display: block;
}
.dropdown-menu > li > div > div > a:focus {
color: #262626;
text-decoration: none;
background-color: #f5f5f5;
}
.dropdown-menu > li > div > div > a:hover {
color: #262626;
text-decoration: none;
background-color: #f5f5f5;
}
.pl-0 {
padding-left: 0 !important;
}
.pr-0 {
padding-right: 0 !important;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="dropdown" id="presetDropdownButton">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Presets
<span class="caret"></span>
</button>
<ul class="dropdown-menu" id="presetDropdown">
<li class="comboRow">
<div class="row">
<div class="col-md-9 col-xs-9 pr-0">
<a class="comboItem" href="#" value="1">Preset 1</a>
</div>
<div class="col-md-3 col-xs-3 pl-0">
<button type="button" class="close deletePreset" aria-label="Delete" style="margin-right: 10px;">
<span aria-hidden="true">×</span>
</button>
<button type="button" class="close edit editPreset" aria-label="Edit" style="margin-right: 3px;">
<span aria-hidden="true">✎</span>
</button>
<button type="button" class="close edit savePreset" aria-label="Save" style="margin-right: 3px;">
<span style="font-size: 18px;" aria-hidden="true">💾</span>
</button>
</div>
</div>
</li>
<li class="comboRow">
<div class="row">
<div class="col-md-9 col-xs-9 pr-0">
<a class="comboItem" href="#" value="1">Preset 2 with longer name</a>
</div>
<div class="col-md-3 col-xs-3 pl-0">
<button type="button" class="close deletePreset" aria-label="Delete" style="margin-right: 10px;">
<span aria-hidden="true">×</span>
</button>
<button type="button" class="close edit editPreset" aria-label="Edit" style="margin-right: 3px;">
<span aria-hidden="true">✎</span>
</button>
<button type="button" class="close edit savePreset" aria-label="Save" style="margin-right: 3px;">
<span style="font-size: 18px;" aria-hidden="true">💾</span>
</button>
</div>
</div>
</li>
<li class="comboRow">
<div class="row">
<div class="col-md-9 col-xs-9 pr-0">
<a class="comboItem" href="#" value="1">Preset 3 with even longer name</a>
</div>
<div class="col-md-3 col-xs-3 pl-0">
<button type="button" class="close deletePreset" aria-label="Delete" style="margin-right: 10px;">
<span aria-hidden="true">×</span>
</button>
<button type="button" class="close edit editPreset" aria-label="Edit" style="margin-right: 3px;">
<span aria-hidden="true">✎</span>
</button>
<button type="button" class="close edit savePreset" aria-label="Save" style="margin-right: 3px;">
<span style="font-size: 18px;" aria-hidden="true">💾</span>
</button>
</div>
</div>
</li>
</ul>
</div>

This should do the trick.
.comboItemContainer {
width: 100%;
position: relative;
}
.anchorDiv {
display: inline-block;
width: 100%;
padding: 0 80px 0 0;
}
.comboButtons {
width: 74px;
display: block;
position: absolute;
top: 0px;
right: 0px;
}
I made the container relative so that I can freely use absolute positioning on its children with a (0,0) origin relative to the container. Then I made the buttons absolute, made it top 0 and right 0. Added 100% width on the anchor and 80px padding-right.
This may look hacky but I'm not really that good in Flex and absolutely zero in Grid
This is almost certainly cross browser though

Preventing apperance of jumping when fading elements in and out

Objective
Make it so that the text is the only thing that fades in and out, while the containers that hold the text have a fixed height to remove the apperance of text jumping
Remove any duplication of code in scripts.js especially with all the let statements
Codepen: http://codepen.io/onlyandrewn/pen/NbdGrg
Problem
I have a series of panels and on button click of either btn--previous or btn--next you get shown the next panel in the series .panel--one, .panel--two, the old one fades out and the new one fades in. However, when fading elements in and out the text appears to jump.
scripts.js
// Complete
function completeStepOne() {
$(".circle--one").removeClass("is-selected");
$(".check--one").removeClass("is-hidden");
$(".text--one").addClass("is-strikethrough");
$(".circle--one").addClass("is-completed");
$(".number--one").addClass("is-hidden");
$(".circle--two").addClass("is-selected");
$(".text--two").removeClass("is-grey");
}
function completeStepTwo() {
$(".circle--two").removeClass("is-selected");
$(".check--two").removeClass("is-hidden");
$(".text--two").addClass("is-strikethrough");
$(".circle--two").addClass("is-completed");
$(".number--two").addClass("is-hidden");
$(".circle--three").addClass("is-selected");
$(".text--three").removeClass("is-grey");
}
function completeStepsOneTwo() {
$(".circle--one, .circle--two").removeClass("is-selected");
$(".check--one, .check--two").removeClass("is-hidden");
$(".text--one, .text--two").addClass("is-strikethrough");
$(".circle--one, .circle--two").addClass("is-completed");
$(".number--one, .number--two").addClass("is-hidden");
$(".circle--three").addClass("is-selected");
$(".text--three").removeClass("is-grey");
}
// Incomplete
function incompleteStepTwo() {
$(".number--one").removeClass("is-hidden");
$(".circle--one").addClass("is-selected");
$(".text--one").removeClass("is-strikethrough");
$(".circle--two").removeClass("is-selected");
$(".text--two").addClass("is-grey");
$(".check--one").addClass("is-hidden");
}
function incompleteStepThree() {
$(".number--two").removeClass("is-hidden");
$(".circle--two").addClass("is-selected");
$(".circle--two").removeClass("is-completed");
$(".check--two").addClass("is-hidden");
$(".text--two").removeClass("is-strikethrough");
$(".circle--three").removeClass("is-selected");
$(".text--three").addClass("is-grey");
}
function incompleteStepsOneTwo() {
$(".number--one, .number--two").removeClass("is-hidden");
$(".circle--one").addClass("is-selected");
$(".circle--two").removeClass("is-completed");
$(".check--one, .check--two").addClass("is-hidden");
$(".text--one, .text--two").removeClass("is-strikethrough");
$(".circle--two, .circle--three").removeClass("is-selected");
$(".text--two, .text--three").addClass("is-grey");
}
// Show panels
function showPanelOne() {
$(".inner--one").fadeIn();
$(".inner--one").removeClass("is-hidden");
// Hide panels two and three
$(".inner--two").fadeOut();
$(".inner--two").addClass("is-hidden");
$(".inner--spend").fadeOut();
$(".inner--spend").addClass("is-hidden");
}
function showPanelHim() {
$(".panel--him").fadeIn();
$(".inner--him").fadeIn();
$(".panel--him").removeClass("is-hidden");
$(".inner--him").removeClass("is-hidden");
// Hide panels one and three
$(".inner--one").fadeOut();
$(".inner--one").addClass("is-hidden");
$(".inner--spend").fadeOut();
$(".inner--spend").addClass("is-hidden");
}
function showPanelHer() {
$(".panel--her").fadeIn();
$(".inner--she").fadeIn();
$(".panel--her").removeClass("is-hidden");
$(".inner--she").removeClass("is-hidden");
// Hide panels one and three
$(".inner--one").fadeOut();
$(".inner--one").addClass("is-hidden");
$(".inner--spend").fadeOut();
$(".inner--spend").addClass("is-hidden");
}
function showPanelAnyone() {
$(".panel--anyone").fadeIn();
$(".inner--anyone").fadeIn();
$(".panel--anyone").removeClass("is-hidden");
$(".inner--anyone").removeClass("is-hidden");
// Hide panels one and three
$(".inner--one").fadeOut();
$(".inner--one").addClass("is-hidden");
$(".inner--spend").fadeOut();
$(".inner--spend").addClass("is-hidden");
}
function showPanelThree() {
$(".panel--three").fadeIn();
$(".inner--spend").fadeIn();
$(".panel--three").removeClass("is-hidden");
$(".inner--spend").removeClass("is-hidden");
// Hide panels one and two
$(".inner--one").fadeOut();
$(".inner--one").addClass("is-hidden");
$(".inner--two").fadeOut();
$(".inner--two").addClass("is-hidden");
}
$(".btn--next").on("click", function(){
// Progress bar circles
let circleOneSelected = $(".circle--one").hasClass("is-selected");
let circleTwoSelected = $(".circle--two").hasClass("is-selected");
let circleThreeSelected = $(".circle--three").hasClass("is-selected");
// Panel One options
let giftsforHimSelected = $(".btn--option-him").hasClass("is-selected");
let giftsforHerSelected = $(".btn--option-her").hasClass("is-selected");
let giftsforKidsSelected = $(".btn--option-kids").hasClass("is-selected");
let giftsforAnyoneSelected = $(".btn--option-anyone").hasClass("is-selected");
// Panel Two options
let typeHimJewelry = $(".btn--option-him-jewelry").hasClass("is-selected");
let typeHimScarves = $(".btn--option-him-scarves").hasClass("is-selected");
let typeHimFishing = $(".btn--option-him-fishing").hasClass("is-selected");
let typeHimCologne = $(".btn--option-him-cologne").hasClass("is-selected");
let typeHimShirts = $(".btn--option-him-shirts").hasClass("is-selected");
let typeHimSports = $(".btn--option-him-sports").hasClass("is-selected");
// Panel Three options
let under25 = $(".btn--option-25").hasClass("is-selected");
let under50 = $(".btn--option-50").hasClass("is-selected");
let under75 = $(".btn--option-75").hasClass("is-selected");
let under100 = $(".btn--option-100").hasClass("is-selected");
let under250 = $(".btn--option-u250").hasClass("is-selected");
let over250 = $(".btn--option-o250").hasClass("is-selected");
let btnLikeSelected = $(".btn--like").hasClass("is-selected");
if (circleOneSelected) {
if (giftsforHimSelected) {
completeStepOne();
showPanelHim();
} else if (giftsforHerSelected) {
completeStepOne();
showPanelHer();
} else if (giftsforKidsSelected) {
completeStepsOneTwo();
showPanelThree();
} else if (giftsforAnyoneSelected) {
completeStepOne();
showPanelAnyone();
}
}
if (circleTwoSelected && btnLikeSelected) {
completeStepTwo();
showPanelThree();
}
if (circleThreeSelected && btnSpendSelected) {
// Do action
}
});
$(".btn--previous").on("click", function(){
// Progress bar circles
let circleOneSelected = $(".circle--one").hasClass("is-selected");
let circleTwoSelected = $(".circle--two").hasClass("is-selected");
let circleThreeSelected = $(".circle--three").hasClass("is-selected");
// Panel One options
let giftsforHimSelected = $(".btn--option-him").hasClass("is-selected");
let giftsforHerSelected = $(".btn--option-her").hasClass("is-selected");
let giftsforKidsSelected = $(".btn--option-kids").hasClass("is-selected");
let giftsforAnyoneSelected = $(".btn--option-anyone").hasClass("is-selected");
// Panel Two options
let typeHimJewelry = $(".btn--option-him-jewelry").hasClass("is-selected");
let typeHimScarves = $(".btn--option-him-scarves").hasClass("is-selected");
let typeHimFishing = $(".btn--option-him-fishing").hasClass("is-selected");
let typeHimCologne = $(".btn--option-him-cologne").hasClass("is-selected");
let typeHimShirts = $(".btn--option-him-shirts").hasClass("is-selected");
let typeHimSports = $(".btn--option-him-sports").hasClass("is-selected");
// Panel Three options
let under25 = $(".btn--option-25").hasClass("is-selected");
let under50 = $(".btn--option-50").hasClass("is-selected");
let under75 = $(".btn--option-75").hasClass("is-selected");
let under100 = $(".btn--option-100").hasClass("is-selected");
let under250 = $(".btn--option-u250").hasClass("is-selected");
let over250 = $(".btn--option-o250").hasClass("is-selected");
let btnLikeSelected = $(".btn--like").hasClass("is-selected");
let btnHimSelected = $(".btn--him").hasClass("is-selected");
if (circleOneSelected) {
}
if (circleTwoSelected) {
incompleteStepTwo();
showPanelOne();
}
if (circleThreeSelected) {
if (giftsforHimSelected) {
incompleteStepThree();
showPanelHim();
} else if (giftsforHerSelected) {
incompleteStepThree();
showPanelHer();
} else if (giftsforKidsSelected) {
incompleteStepsOneTwo();
showPanelOne();
} else if (giftsforAnyoneSelected) {
incompleteStepThree();
showPanelAnyone();
}
}
});
index.html
<!-- Panel One -->
<div class="panel panel--one">
<div class="advertising advertising--horizontal">
<img src="http://placehold.it/720x90">
</div>
<section class="panel__progress">
<ul>
<li>
<div class="panel__pick">
<p class="panel__circle circle--one is-selected">
<i class="fa fa-check check--one is-hidden" aria-hidden="true"></i>
<span class="panel__number number--one">1</span>
</p>
<p class="panel__text text--one">Choose a category</p>
</div>
</li>
<li>
<div class="panel__pick">
<p class="panel__circle circle--two">
<i class="fa fa-check check--two is-hidden" aria-hidden="true"></i>
<span class="panel__number number--two">2</span>
</p>
<p class="panel__text text--two is-grey">Pick some items</p>
</div>
</li>
<li>
<div class="panel__pick">
<p class="panel__circle circle--three">
<i class="fa fa-check check--three is-hidden" aria-hidden="true"></i>
<span class="panel__number number--three">3</span>
</p>
<p class="panel__text text--three is-grey">Name your budget</p>
</div>
</li>
</ul>
</section> <!-- .panel__progress -->
<div class="test">
<div class="panel__inner inner--one">
<div class="panel__info">
<h2 class="panel__title">Who is the gift for?</h2>
<h3 class="panel__instructions pick--one">Pick one of the options below</h3>
<!-- <h3 class="panel__instructions">Eeny, meeny, miny, moe</h3> -->
</div>
<div class="button__group group--quarter">
<button class="btn btn--option btn--option-him btn--who">Gifts for him <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--option-her btn--who">Gifts for her <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--option-kids btn--who">Gifts for kids <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--option-anyone btn--who">Gifts for anyone <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
</div>
<div class="button__group button__controls">
<button class="btn btn--previous previous--one"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> Previous</button>
<button class="btn btn--next next--one">Next <i class="fa fa-long-arrow-right" aria-hidden="true"></i></button>
</div>
</div> <!-- .panel__inner -->
</div>
</div> <!-- .panel .panel--one -->
<!-- Panel Two -->
<!-- Gifts for Him -->
<div class="panel panel--two panel--him is-hidden">
<div class="test">
<div class="panel__inner inner--two inner--him">
<div class="panel__info">
<h2 class="panel__title">What are some things he might like?</h2>
<h3 class="panel__instructions pick--three">Pick three items below to help us narrow your search</h3>
</div>
<div class="button__group">
<button class="btn btn--option btn--option-him-jewelry btn--like">Jewelry <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--option-him-scarves btn--like">Scarves <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--option-him-fishing btn--like">Fishing <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--option-him-cologne btn--like">Cologne <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--option-him-shirts btn--like">Shirts <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--option-him-sports btn--like">Sports apparel <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
</div>
<div class="button__group button__controls">
<button class="btn btn--previous previous--two"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> Previous</button>
<button class="btn btn--next next--two">Next <i class="fa fa-long-arrow-right" aria-hidden="true"></i></button>
</div>
</div> <!-- .panel__inner -->
</div> <!-- .test -->
</div> <!-- .panel .panel--two -->
<!-- Panel Two -->
<!-- Gifts for Her -->
<div class="panel panel--two panel--her is-hidden">
<!-- <div class="advertising advertising--horizontal">
<img src="http://placehold.it/720x90">
</div> -->
<div class="panel__inner inner--two inner--she">
<div class="panel__info">
<h2 class="panel__title">What are some things she might like?</h2>
<h3 class="panel__instructions pick--three">Pick three items below to help us narrow your search</h3>
</div>
<div class="button__group">
<button class="btn btn--option btn--like">Cashmere <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--like">Perfume <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--like">Scarves <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--like">Sweaters <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--like">Beauty <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--like">Candles <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--like">Necklaces <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--like">Sports jewelry <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--like">Watches <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
</div>
<div class="button__group button__controls">
<button class="btn btn--previous previous--two"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> Previous</button>
<button class="btn btn--next next--two">Next <i class="fa fa-long-arrow-right" aria-hidden="true"></i></button>
</div>
</div> <!-- .panel__inner -->
</div> <!-- .panel .panel--two -->
<!-- Panel Two -->
<!-- Gifts for Anyone -->
<div class="panel panel--two panel--anyone is-hidden">
<!-- <div class="advertising advertising--horizontal">
<img src="http://placehold.it/720x90">
</div> -->
<div class="panel__inner inner--two inner--anyone">
<div class="panel__info">
<h2 class="panel__title">What are some things they might like?</h2>
<h3 class="panel__instructions pick--three">Pick three items below to help us narrow your search</h3>
</div>
<div class="button__group">
<button class="btn btn--option btn--like">Cookbooks <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--like">Spirits <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--like">Suitcases / bags <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--like">Food<i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--like">Gardening <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--like">Gadgets <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--like">Made in St. Louis <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--like">Gifts that give back <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--like">Fitness <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--like">Subscriptions <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--like">Ornaments <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--like">Pets <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--like">Personalized <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--like">Other <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--like is-hidden"> <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
</div>
<div class="button__group button__controls">
<button class="btn btn--previous previous--two"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> Previous</button>
<button class="btn btn--next next--two">Next <i class="fa fa-long-arrow-right" aria-hidden="true"></i></button>
</div>
</div> <!-- .panel__inner -->
</div> <!-- .panel .panel--two -->
<!-- Panel Three -->
<div class="panel panel--three is-hidden">
<!-- <div class="advertising advertising--horizontal">
<img src="http://placehold.it/720x90">
</div> -->
<div class="panel__inner inner--spend">
<div class="panel__info">
<h2 class="panel__title">How much do you want to spend?</h2>
<h3 class="panel__instructions pick--one">Pick one of the options below</h3>
<!-- <h3 class="panel__instructions">Remember, it's the thought that counts</h3> -->
</div>
<div class="button__group">
<button class="btn btn--option btn--option-25 btn--spend">Under $25 <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--option-50 btn--spend">Under $50 <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--option-75 btn--spend">Under $75 <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--option-100 btn--spend">Under $100 <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--option-u250 btn--spend">Under $250 <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--option-o250 btn--spend">$250 and over <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
</div>
<div class="button__group button__controls">
<button class="btn btn--previous previous--three"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> Previous</button>
<button class="btn btn--next next--three">Next <i class="fa fa-long-arrow-right" aria-hidden="true"></i></button>
</div>
</div> <!-- .panel__inner -->
</div> <!-- .panel .panel--three -->
app.css
/*----------------------------------
BUTTONS
----------------------------------*/
.button__group {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 75%;
margin-top: 15px;
margin-bottom: 15px;
margin: 0 auto;
padding-left: 30px;
}
.button__group.group--quarter {
width: 50%;
}
.button__controls {
margin-top: 60px;
margin-bottom: 60px;
}
button {
display: block;
margin-top: 15px;
margin-bottom: 15px;
padding: 20px;
padding-right: 60px;
padding-left: 60px;
cursor: pointer;
text-align: left;
border: none;
background: #ffffff;
}
.btn--previous,
.btn--next,
.btn--buy,
.btn--all,
.btn--recommend,
.btn--option {
text-transform: uppercase;
border-radius: 3px;
font-family: "Roboto", sans-serif;
font-size: 1.4rem;
font-weight: 700 !default;
}
.btn--previous,
.btn--next {
display: inline;
margin-right: 30px;
min-width: 225px;
text-align: center;
}
.btn--all,
.btn--recommend,
.btn--option {
border: 1px solid #aaaaaa;
}
.btn--previous {
color: #c62828;
border: 1px solid #c62828;
}
.btn--previous .fa-long-arrow-left {
color: #c62828;
}
.btn--all,
.btn--recommend,
.btn--option {
font-weight: 400;
text-transform: none;
color: #212121;
display: inline-block;
margin-right: 30px;
min-width: 225px;
min-height: 75px;
border-bottom: 2px solid #aaaaaa;
}
.btn--all,
.btn--recommend {
background: #c62828;
border: none;
color: #fff;
font-weight: 700;
text-align: center;
}
.btn--all:hover,
.btn--recommend:hover {
background: #990000;
border: none;
}
.btn--option {
text-align: left;
padding-left: 30px;
min-width: 260px;
min-height: 75px;
font-size: 1.6rem;
}
.btn--option.is-selected {
border: 2px solid #c62828;
color: #c62828;
}
.btn--option .fa-check {
color: #c62828;
float: right;
position: relative;
right: -40px;
top: -1px;
}
.btn--option .fa-check.is-grey {
color: #e7e7e7;
}
.btn--option .fa-check.is-red {
color: #c62828;
}
.btn--sidebar {
font-weight: 400;
text-transform: none;
margin: 0;
font-size: 1.6rem;
padding-left: 15px;
font-family: "Roboto";
background: transparent;
color: #212121;
margin-top: 15px;
padding-top: 5px;
padding-bottom: 5px;
}
.btn--sidebar:hover {
color: #aaaaaa;
color: #ccc;
}
.btn--next,
.btn--buy {
color: #ffffff;
border: none;
background: #c62828;
}
.btn--buy {
margin: 0;
width: 100%;
text-align: center;
margin-top: 15px;
text-decoration: none;
}
.btn--buy:visited {
text-decoration: none;
}
.btn--view {
border: none;
margin-bottom: 0;
}
.btn--view:hover {
color: #212121;
}
.btn--next {
border-bottom: 2px solid #990000;
}
.btn--next:hover {
background: #990000;
transition: 0.2s;
}
/* Custom query */
#media (max-width: 1250px) {
.button__group {
width: 80%;
}
.button__group.group--quarter {
width: 70%;
}
}
/* Large devices */
#media (max-width: 1200px) {
.button__group {
width: 90%;
}
}
/* Large devices */
#media (max-width: 1024px) {
.button__group {
width: 100%;
}
.button__group.group--quarter {
width: 85%;
}
}
/* Medium devices */
#media (max-width: 768px) {
.button__group {
width: 100%;
}
.button__group.group--quarter {
width: 100%;
}
}
/* Medium devices */
/* Small devices */
#media (max-width: 480px) {
.btn--option {
min-width: 275px;
}
.btn--all,
.btn--recommend {
min-width: 275px;
}
}
/*----------------------------------
LIST
----------------------------------*/
ul {
padding: 0;
}
ul li {
display: inline-block;
margin-right: 15px;
text-align: center;
}
.panel {
width: 100%;
height: 100%;
position: relative;
}
.panel.is-hidden {
display: none;
}
.panel__progress {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.panel__circle {
width: 50px;
height: 50px;
margin: 0 auto;
padding: 15px;
border: 1px solid #aaaaaa;
border-radius: 50%;
font-size: 1.6rem;
font-weight: 300 !default;
}
.panel__circle.is-selected {
color: #ffffff;
border: none;
background: #c62828;
}
.panel__circle.is-completed {
border: 1px solid #c62828;
}
.panel__circle.is-completed .fa-check {
color: #c62828;
}
.panel__text {
font-family: "Roboto", sans-serif;
font-size: 1.4rem;
}
.panel__number {
position: relative;
top: -22px;
}
.panel__number.is-hidden {
display: none;
}
.panel__pick {
padding: 15px;
text-align: center;
}
.panel__title {
font-family: "Merriweather";
font-weight: 900;
text-transform: none;
margin-top: 30px;
font-size: 4rem;
}
.panel__instructions {
text-align: center;
font-weight: 400;
font-family: "Open Sans";
font-size: 1.8rem;
color: #aaaaaa;
margin: 0;
margin-top: 15px;
margin-bottom: 30px;
}
/* Large devices */
/* Large devices */
/* Custom query */
#media (max-width: 875px) {
.panel__title {
width: 80%;
margin: auto;
margin-top: 30px;
}
}
/* Medium devices */
/* Medium devices */
#media (max-width: 640px) {
.panel__circle,
.panel__text {
display: none;
}
}
/* Small devices */
#media (max-width: 480px) {
.panel__title {
font-size: 3.5rem;
}
}

use combination of transition and visibility in CSS
.element {
visibility:hidden;
opacity:0;
transition:opacity 0.5s linear;
}
.element.is-selected {
visibility:visible;
opacity:1;
}

AppendTo and then possible deleting of that element [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 7 years ago.
I have some elements can I'm moving into another div (from x to y). The problem is that the the elements in x are deletable but the new copied element is not.
Here is the first state
Here the state after deleting Filter 1
Here the state after adding the Name person above... but I can't delete it like the others elements!
I already checked the classes css and they seem okay.
Here my code.
JS
function AddFilters()
{
if ( $(".filter-edited").css('display') == 'none' )
{
$("#btn_add").html("Hide Filters");
// element is hidden
$(".filter-edited").fadeIn();
}
else if ( $(".filter-edited").css('display') != 'none' )
{
$("#btn_add").html("Add Filter");
// element is hidden
$(".filter-edited").hide();
}
}
$(document).ready(function() {
$('.removable').on('click', function() {
$(this).parent().remove();
});
});
$(document).ready(function() {
$('.addable').on('click', function() {
$(this).parent().appendTo(".filter-added");
$(this).attr('class', 'glyphicon glyphicon-remove pull-right removable');
});
});
HTML
<script src="../assets/own_js/addfilters.js"></script>
<div class="row add-filters">
<div class="col-md-12">
<div class="row ">
<div class="col-sm-10 filter-added">
<span> Filtered on: </span>
<a class="btn btn-default">
<span class="text">Filter 1</span>
<span class="glyphicon glyphicon-remove pull-right removable" ></span>
</a>
<a class="btn btn-default">
<span class="text">Filter 2</span>
<span class="glyphicon glyphicon-remove pull-right removable"></span>
</a>
<a class="btn btn-default">
<span class="text">Filter 3</span>
<span class="glyphicon glyphicon-remove pull-right removable" ></span>
</a>
</div>
<div class="col-sm-2 pull-right">
<a class="btn btn-default" id="btn_add" onclick="AddFilters()">Add filter</a>
</div>
</div>
<div class="row filter-edited" style="display:none;">
<div class="col-md-12">
<div class="row">
<div class="col-md-10 filters">
<a class="btn btn-default">
<span class="text">Business</span>
<span class="glyphicon glyphicon-plus pull-right addable"></span>
</a>
<a class="btn btn-default">
<span class="text">Campaign</span>
<span class="glyphicon glyphicon-plus pull-right addable"></span>
</a>
<a class="btn btn-default">
<span class"text">Event</span>
<span class="glyphicon glyphicon-plus pull-right addable"></span>
</a>
<a class="btn btn-default">
<span class"text">Channel</span>
<span class="glyphicon glyphicon-plus pull-right addable"></span>
</a>
<a class="btn btn-default">
<span class"text">Name person</span>
<span class="glyphicon glyphicon-plus pull-right addable"></span>
</a>
</div>
<div class="col-md-2">
</div>
</div>
<div class="row">
</div>
</div>
</div>
</div>
</div>
SASS CSS
.add-filters
{
.filter-added
{
span
{
margin-right: 5px;
}
span.glyphicon.glyphicon-remove
{
margin-left: 8px;
color: red;
&:hover
{
cursor: pointer;
color:rgba(0,0,0,0.5); /*where 0.5 stands for 50% opacity*/
}
}
a.btn.btn-default
{
min-width:100px;
padding: 3px 0px 0px 0px;
margin-left: 10px;
//delete the margin between the buttons on small devices
#media (max-width: 768px) {
margin-left: 0px;
}
&:first-of-type
{
margin-left: 0px;
}
&:hover
{
cursor:default;
background-color: #fff;
border-color: #ccc;
}
}
}
.filter-edited
{
margin-top: 20px;
/* Safari 3-4, iOS 1-3.2, Android 1.6- */
-webkit-border-radius: 7px;
/* Firefox 1-3.6 */
-moz-border-radius: 7px;
/* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
border-radius: 7px;
border: 1px solid #ddd;
span.glyphicon.glyphicon-plus
{
margin-left: 4px;
color: #15925f;
}
a.btn.btn-default
{
min-width:150px;
padding: 10px 5px 10px 0px;
margin-left: 5px;
//delete the margin between the buttons on small devices
#media (max-width: 768px) {
margin-left: 0px;
margin-top: 2px;
}
&:first-of-type
{
margin-left: 0px;
}
}
.filters {
padding: 15px;
}
}
}

You are listening only for events on currently shown elements. You need to call .on() function on parent element and pass child selector as a second parameter.
$(document).ready(function() {
$('.filter-added').on('click', '.removable', function() {
$(this).parent().remove();
});
});

$('.removable').on('click', function() {
$(this).parent().remove();
});
Should Be:
$(document).on('click', '.removable', function() {
$(this).parent().remove();
});
The reason behind this being, is that you are only applying this event to the current elements on the page. The markup below applies it to all elements of '.removable' that exist on the document. Current and future.
You could also run a .bind() on the object after it is created, and bind an event to it, but that would take more code and be less efficient.

Categories

Resources