Develop Reference

removing background of specific anchor tag

I wrote a code to create a bootstrap panel and add some elements and remove them when clicked on Remove icon. When I click on Remove icon, background of all elements will be removed. I don't want this to happen. I want background of particular element whose Remove icon is clicked to be removed. My Code:
$(document).ready(function (){
$(".remove_gly").click(function () {
//alert('Clicked');
//var catName = $(span).closest('a').text();
// var index = subscriptionArrays.indexOf(catName);
// if (index > -1) {
//subscriptionArrays.splice(index, 1);
// }
//span.parentNode.innerHTML = span.innerHTML;
$("a").closest(".droggIng").removeClass("droggIng");
});
});
JSFiddle link: https://jsfiddle.net/kqcs0pq9/8/
How can I do it?

Remove a and add this
$(this).closest(".droggIng").removeClass("droggIng");

use this :
$(this).closest(".droggIng").removeClass("droggIng");
Updated Fiddle

Please try this code, it will do the job-
$(document).ready(function (){
$(".remove_gly").click(function () {
$(this).parent(".droggIng").removeClass("droggIng");
});
});

JQuery not removing active class

I'm trying to make my links slide down over the page when the mobile nav is clicked and the content to disappear so only the links are shown. I have got this basically working but the .displayNone class will not remove when I click the mobilenav again and I'm a bit dumfounded as to why.
$(document).ready(function() {
$('#hamburger').on('click', function(){
$('.links').slideToggle(200);
var status = $('.wrapper').hasClass('.displayNone');
if(status){ $('.wrapper').removeClass('.displayNone'); }
else { $('.wrapper').addClass('displayNone'); }
});
});
Bit of newbie to all this. Anything obvious that anyone can see wrong with this?

Use toggleClass(),
$('.wrapper').toggleClass('displayNone');
And, jQuery's xxxClass() functions expect the name of the class, not the selector, so leave off the . class selector.

When adding/removing classes, just use displayNone, not .displayNone (note the dot!).
Also there's a toggleClass() function which saves you from doing the status thing, which means you just need to do
$('.wrapper').toggleClass('displayNone');

your are doing bit wrong
var status = $('.wrapper').hasClass('.displayNone');
when you use hasClass, addClass or removeClass then you don't need to have '.' dot before class name.
so correct way is
var status = $('.wrapper').hasClass('displayNone');
your code after correction
$(document).ready(function() {
$('#hamburger').on('click', function() {
$('.links').slideToggle(200);
var status = $('.wrapper').hasClass('displayNone');
if (status) {
$('.wrapper').removeClass('displayNone');
} else {
$('.wrapper').addClass('displayNone');
}
});
});

You can use :
$('.wrapper').toggleClass("displayNone");
Final code :
$(document).ready(function(){
$('#hamburger').on('click', function(){
$('.links').slideToggle(200);
$('.wrapper').toggleClass("displayNone");
})
})

Remove class on body does not work with pagepiling.js

I've made a website using pagepiling.js, this script adds the class 'active' on the section which is in the viewport. Now I want add a class on my body when my section1 is active like this:
$(document).ready(function() {
if ($('#section1').hasClass("active") === true) {
$('body').toggleClass("one");
}
});
It is working well (the class is added on the body) but when I scroll my section1 does not have the class active because I am now on section2, the class on the body is not removed. How can I fix it? I also tried:
$(document).ready(function() {
if ($('#section1').hasClass('active')) {
$('body').addClass('one');
}
else {
$('body').removeClass('one');
}
});
But it is not working.

You have to put your condition inside scroll event because you should check every time the user scroll :
$('body').on('scroll', function() {
if ( $('#section1').hasClass("active") ){
$('body').toggleClass("one");
}
});
Hope this helps.

Now I want add a class on my body when my section1 is active
You actually don't need to.
PagePiling.js adds a class to the body element for you with the form pp-viewing-page2. You can check it in your DOM inspector in the demo page.
But if you still want to add a class, just use the callbacks the plugin provides, like this:
$('#pagepiling').pagepiling({
afterLoad: function(anchorLink, index){
if(index == 1){
$('body').addClass('one');
}else{
$('body').removeClass('one');
}
}
});

jquery - How to return default height toogle automaticly by clicking another place

Here, I have a working toogle code,so I have added some code that when click another place also return to default height(32px),but not working.
var toggled = false;
$('.dropdown-toggle').click(function() {
$('.changeHeight').css('height', toggled ? '32px' : '65px');
toggled = !toggled;
});
$(document).click( function(){ // if click another place will set default height
$('.changeHeight').css('height','32');
});

The element .dropdown-toggle is part of the document. Click on it will fire both event handlers. When it's clicked, you must prevent the documents event handler from being notified with stopPropagation(). Like this:
$('.dropdown-toggle').click(function(e) {
e.stopPropagation();
$('.changeHeight').css('height', toggled ? '32px' : '65px');
toggled = !toggled;
});

Are you missing "px"?
$(document).click( function(){ // if click another place will set default height
$('.changeHeight').css('height','32px');
});
You could also add a class on toggle, and remove it again. See more info on toggleClass in jQuery
$('.dropdown-toggle').click(function() {
$('.changeHeight').toggleClass("toggled");
});

Toggling between image

I have two images with which I am using in an anchor tag. I am using jquery toggle on the click event of the anchor tag to swap between images.
$(document).ready(function(){
$('#registrationForm').hide();
$('#callform').append("<a id='formlink'>IMAGE 1</a>");
$("#formlink").click(function(){
$('#registrationForm').toggle(function(){
$('#formlink').empty().append(IMAGE 2);
});
});
});
This works fine the first time around, however i want to toggle between the two images whenever the other is clicked.
Any ideas ?

I'd suggest adding both images initially, but hiding the second image. You can then toggle both images each time the link is clicked without needing to track the state of the images:
$(document).ready(function(){
$('#callform').append("<a id='formlink1' class='formlink'>IMAGE 1</a>");
$('#callform').append("<a id='formlink2' class='formlink' style='display: none;'>IMAGE 2</a>");
$(".formlink").click( function(){
$('#formlink1').toggle();
$('#formlink2').toggle();
});
});

You could just setup a flag when you change to IMAGE1.
selected_image = 'image1'
if(selected_image == 'image1')
toggle to image 2
else
toggle to image 1

Your code is designed to append 'IMAGE 2' after the toggle is complete, and nothing else.
You probably want something like:
$("#formlink").click(function(){
$('#registrationForm').toggle(function(){
var imageToShow = $(this).css('display') == 'none')?'IMAGE 1':'IMAGE 2';
$('#formlink').empty().append(imageToShow);
});
});

$(document).ready(function(){
var i = 0;
$('#registrationForm').hide();
$('#callform').append("<a id='formlink'>IMAGE 1</a>");
$("#formlink").click(function(){
$('#registrationForm').toggle(function(){
if ( ++i % 2 ) {
$('#formlink').empty().append(IMAGE 2);
} else {
$('#formlink').empty().append(IMAGE 1);
}
});
});
});

this is how I toggle an image
$('.accordion').live('click',function() {
if($(this).attr("src").indexOf('closed') == -1){
$(this).attr("src",'img/accordionclosed.gif');
}else{
$(this).("src",'img/accordionopen.gif');
}
});
hth