Develop Reference

Sidr - remove prefix from all the children classes using jQuery

I need to remove the prefix 'sidr-class-' from all the classes inside the 'sidr-inner' parent div. Sidr provides an option to remove all the prefixes, but it removes prefixes from ID's as well. I want to remove only the class prefixes. The HTML is as follows:
<div class="sidr-inner">
<div class="sidr-class-col-sm-12">
<h2>Search by location</h2>
<form>
<input type="search" class="sidr-class-form-control" placeholder="Your location / postal code">
<button type="submit" class="sidr-class-btn sidr-class-btn-default">Search</button>
</form>
</div>
</div>
At the moment I'm using the following jQuery snippet to search and add classes, but it's not convenient to do it with a large number of classes.
$(document).ready(function(){
if($('div').hasClass('sidr-class-col-sm-12')) {
$('.sidr-class-col-sm-12').addClass('col-sm-12');
}
});
Anyone have an idea how to get this done using jQuery or Javascript? Thanks in advance!

you can try this code:
$(document).ready(function(){
$('.sidr-inner [class*="sidr-class"]').each(function(){
var old_classes = $(this).attr('class');
old_classes = old_classes.replace(/sidr-class-/g, '');
$(this).attr('class', old_classes);
});
});
or this code:
$(document).ready(function(){
$('.sidr-inner [class*="sidr-class"]').each(function(){
$(this).attr('class', change_class);
});
});
function change_class(i, v)
{
return v.replace(/sidr-class-/g, '');
}
to solve your problem.

Change class group of buttons

I have three buttons and each one has a CSS class. At click of one of them, i would like remove the class and add a new CSS class only for the clicked element. Furthermore, I need to keep pressed the selected button.
I searched some examples and I found that is possible do something like this:
$(".class").removeClass("choice").addClass("active");
This works for all buttons, but not only for one. I try to change this in
$(this).removeClass("choice").addClass("active");
but this didn't work.
I make a fiddle for more compreansion: https://jsfiddle.net/90u6b3tj/3/
EDIT
I need the same behavior when i press a second time
Sorry for the basic problem.
Thanks in advance
Regards

I've updated your jsfiddle for a working solution:
https://jsfiddle.net/90u6b3tj/10/
Here's the javascript part:
$(function() {
$("button").click(function(e) {
e.preventDefault();
$(this).toggleClass("active");
});
});

as you are adding your click events like so:-
<button id="hourly" class="choice" onclick="change()">Orario</button>
you could use event.target:-
function change(){
event.preventDefault();
$(event.target).removeClass("choice").addClass("active");
}
OR, change your event and pass in this:-
<button id="hourly" class="choice" onclick="change(this)">Orario</button>
so you can do:-
function change(element){
event.preventDefault();
$(element).removeClass("choice").addClass("active");
}
OR better still:-
$('.choice').click(function(e){
e.preventDefault();
$(this).removeClass("choice").addClass("active");
});
and remove the inline click event.

You can use the following code instead.
$(".class").click(function(){
$(".class").addClass("choice");
$(".class").removeClass("active");
$(this).removeClass("choice").addClass("active");
});
Here, the "choice" class is removed only from the clicked class. Not from the others. Also the "active" class is added to the clicked one.

You may use change(this) in your button markup and refer to that element in your change() function, as shown in this fiddle.

function change(event){
event.preventDefault();
//$(".choice").removeClass("choice").addClass("active");
$(event.target).removeClass("choice").addClass("active");
}
<div>
<button id="hourly" class="choice" onclick="change(event)">Orario</button>
</div>
<div>
<button id="daily" class="choice" onclick="change(event)">Giornaliero</button>
</div>
<div>
<button id="monthly" class="choice" onclick="change(event)">Mensile</button>
</div>

Should it possible so select more than one item as active?
If not, checkout this:
Markup
<div>
<button id="hourly" class="choice">Orario</button>
</div>
<div>
<button id="daily" class="choice">Giornaliero</button>
</div>
<div>
<button id="monthly" class="choice">Mensile</button>
</div>
CSS
.active {
background-color: #A60076;
color: #FF0000;
}
.choice {
background-color: #000000;
color: #FFFFFF;
}
JS
$(document).ready(function() {
$('button').click(function(e) {
$("button").addClass('choice').removeClass('active');
$(this).removeClass('choice').addClass('active');
});
});
Here is a sample fiddle with the above code working.

traversing in jquery DOM failed?

I want to remove the inputs when I click the button. Below is my DOM
I tried but didn't work.
$('#changePassword').click(function(){
$(this).find('.modal-body .inputWrap input').remove();
});
I also tried $(this).find('.modal-body .inputWrap input').remove();

The .modal-body element is not an descendant of the #changePassword element, so using $(this).find(...) will not return any element.
Instead model-body is a ancestor of the button, so you can use .closest() to find it then use .find() on that element to find the target input elements
$('#changePassword').click(function () {
$(this).closest('.modal-body').find('.inputWrap input').remove();
});

Inside $('#changePassword').click, this refers to #changePassword, which is a sibling of the .inputWrap you're searching for. You need to navigate sideways in the DOM, not down.
$('#changePassword').click(function () {
$(this).prev('.inputWrap').find('input').remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="inputWrap">
<input type="text" value="where">
<input type="text" value="who">
</div>
<button id="changePassword">Click!</a>
</div>

Why does jquery not remove an appened div

I have fields in a form and allow the user to add or remove items. The first appended highlight will remove ok but any added ones will not remove.
I have tried the following and had no luck jQuery $(this).remove() not working after append
Here is a jsfiddle of the code below http://jsfiddle.net/3PzmH/3/
<!-- html -->
<div class="features"></div>
// js
var highlight = '<div class="form-group"><label for="highlight" class="col-sm-3 col-lg-2 control-label">Hightlight:</label><div class="col-sm-9 col-lg-3 controls"><input type="text" name="highlight_name[]" data-rule-required="true" class="form-control" value="Hightlight Name"></div><div class="col-sm-9 col-lg-7 controls"><textarea name="highlight_description[]" class="form-control" rows="3" placeholder="Description for highlight"></textarea><i class="fa fa-plus"></i> Remove Highlight</div></div>';
$('.features').append(highlight);
$('#add_highlight').click(function(){
$('.features').append(highlight);
});
$('.remove_highlight').on("click", function(){
$(this).closest('.form-group').remove();
});

Delegate the event to the static parent element
$('.features').on("click", '.remove_highlight', function(){
$(this).closest('.form-group').remove();
});
FIDDLE

You need to use event delegation for dynamically added elements
$('.features').on("click",'.remove_highlight', function(){
$(this).closest('.form-group').remove();
});
DEMO

because dynamically added element dos not bind any function on it.
use the event delegation
$('.features').on('click', '.remove_highlight', function() {
$(this).closest('.form-group').remove();
});

Please use delegate. Refer the updated fiddle.
http://jsfiddle.net/3PzmH/7/
$(document).delegate('.remove_highlight',"click", function(){
$(this).closest('.form-group').remove();
});

input:radio click function isn't triggering in IE / Firefox

I have a form with multiple inputs / radio buttons.
I also have a series of Yes & No radio buttons. When the "Yes" radio button is checked, I have some data slide down beneath.
HTML:
<div class="item seperator first clearfix">
<label>test</label>
<div class="radioWrap">
<label class="yes">
<input class="homepageContent" name="homepageContent" type="radio" value="yes" />
</label>
<label class="no">
<input class="homepageContent" name="homepageContent" type="radio" value="no" checked />
</label>
</div>
</div>
<div class="extrasInner">
<div class="item clearfix">
<label for="theContent">Your Content:</label>
<textarea id="theContent" name="theContent"></textarea>
</div>
</div>
<div class="extrasOuter hide clearfix">
Make Changes
<span>Click "Make Changes" to update.</span>
</div>
The jQuery:
$("input:radio[name=homepageContent], input:radio[name=addSocialIcons], input:radio[name=addTracking]").click(function() {
var value = $(this).val();
if (value == 'yes') {
$(this).parent().parent().parent().next().slideDown();
$(this).parent().parent().parent().next().next().slideDown();
} else {
$(this).parent().parent().parent().next().slideUp();
$(this).parent().parent().parent().next().next().slideUp();
}
});
Question 1) This works absolutely fine in Google Chrome, but not in Firefox and IE. It doesn't seem to recognise the click function?
Solved: I had a function within one of my files that removes the value from input fields on focus and this was stripping the value of the radio buttons as well in IE / Firefox (but not chrome!).
Question 2) Is my DOM traversing for the slideUp / slideDown an acceptable way of achieving what I'm trying to do? Are there any disadvantages to how I'm doing it and can it be improved?

Answer to #1
As Anthony Grist pointed out, there doesn't seem to be an issue with the click function.
Answer to #2
Your DOM traversal seem a bit unnecessary. In fact, your DOM structure is in need of rearrangement.
Using a checkbox instead of radio buttons. A checkbox only accepts two values: true or false, or in your case, yes or no. It seems more suitable.
Encapsulate your extras inner and extras outer divs inside your item div instead of having it next to the checkbox. This way, you make it easier to traverse within the item.
Also, you should read up on the different types of traverse functions JQuery has:
.parent() / .parents()
.children()
.closest()
.next()
.prev()
.siblings()
.find()
and many more.
Knowing all of these traverse functions, you'll most likely never ever do parent().parent().parent()... again. :)
Here's a JSFiddle example | Code
HTML
<ul>
<li class='item'>
<label>
<input class="homepageContent" name="homepageContent" type="checkbox" value="yes" />
Item 1
</label>
<div class='extras'>
<div class='inner'>
<label>
Your Content:<textarea name="content"></textarea>
</label>
</div>
<div class='outer'>
Make Changes
<span>Click "Make Changes" to update.</span>
</div>
</div>
</li>
</ul>
Javascript
$("input:checkbox").click(function() {
var $this = $(this),
$item = $(this).closest(".item");
if($this.is(':checked')){
$(".extras", $item).slideDown();
}else{
$(".extras", $item).slideUp();
}
});
CSS
.extras{
display: none;
}

Value of the radio button will always be same, no matter it is checked or not. If you want to know the particular radio button is checked or not then use this code. Based on the status of the radio button do your stuff.
var value = $(this).attr('checked')

That is working for me in FF (jsfiddle), although the DOM looks a little convoluted (I'm guessing because it's missing a lot of your other CSS/resources).
I think you can simplify the jQuery selectors a lot. Generally, using simple ID or class selectors will make the your page much more performant (and simpler!)
$('.homepageContent').click(function() {
var value = $(this).val();
if (value == 'yes') {
$('.extrasInner').slideDown();
$('.extrasOuter').slideDown();
} else {
$('.extrasInner').slideUp();
$('.extrasOuter').slideUp();
}
});
Hopefully doing something like this makes it work cross browser better too.

try this way
$("input:radio[name=homepageContent], input:radio[name=addSocialIcons], input:radio[name=addTracking]").click(function() {
var value = $(this).val();
if (value == 'yes') {
$(this).parents('.seperator').next().slideDown();
$(this).parents('.seperator').next().next().slideDown();
} else {
$(this).parents('.seperator').next().slideUp();
$(this).parents('.seperator').next().next().slideUp();
}
});
EDIT
​
and also a point
wrap your code inside
$(document).ready(function(){});
like this
$(document).ready(function(){
$("input:radio[name=homepageContent], input:radio[name=addSocialIcons], input:radio[name=addTracking]").click(function() {
var value = $(this).val();
if (value == 'yes') {
$(this).parents('.seperator').next().slideDown();
$(this).parents('.seperator').next().next().slideDown();
} else {
$(this).parents('.seperator').next().slideUp();
$(this).parents('.seperator').next().next().slideUp();
}
});
});