Change css class on child element - javascript

I'm using jQuery to remove CSS class from my elements:
$('.input-group-addon').child($('.glyphicon.glyphicon-calendar').removeClass());
Now on same action immediately I remove that class I want to add myClass for example so I tried:
$('.input-group-addon').child().addClass('myClass');
But this doesn't work, my element stays with class="" instead of class="myClass".

You don't need to use children() at all:
$('.input-group-addon > .glyphicon.glyphicon-calendar').removeClass();
Add class back to all direct ancestors:
$('.input-group-addon > *').addClass('myClass');

.child() is not a jQuery function replace it by .children() :
$('.input-group-addon').children().removeClass();
$('.input-group-addon').children().addClass('myClass');
Or without children() method :
$('.input-group-addon .glyphicon.glyphicon-calendar').removeClass();
$('.input-group-addon .glyphicon.glyphicon-calendar').addClass('myClass');
Hope this helps.

You need to specify the class you want to remove..
$('.input-group-addon').child($('.glyphicon.glyphicon-calendar').removeClass("className"));
Currently, this
$('.input-group-addon').child($('.glyphicon.glyphicon-calendar').removeClass());
removes everything.

Related

Add a class under a parent div

i want to add a class name 'disabled' under a parent div call 'anchorxx'
The disabled class div can be anywhere in the anchorXX divs
is it possible to do it with jquery ? i have no idea how i can manage to do it.
Thanks for your helps
a simple approach is
$(".anchor"+ id + " > div").addClass("disabled")
class will be added to the immediate div child element of .anchor1 div
Use jquery prefix selector and find the relevant element. Use addClass to add the required class
$('div[id^=anchor]').find('.whereYouwantToadd').addClass('someClass')
you can use jQuery's wildcard selector for this purpose.
link
you can find the anchor id and change the class of underlying div like this:
$('div[id*="anchor"]').child('div.fiche-left-disabled').addClass('disabled');
Add the 'disabled' class to its first children:
$('#anchor1').children().first().addClass('disabled')
For all anchors
$('div[id^="anchor"]').children().first().addClass('disabled')

How to check if element exists after the current element with jQuery?

I need to check the following
if after $('.brandModelLineWrapper') there isn't a clearfix div, add it:
$('.brandModelLineWrapper').after("<div class='clear'></div>")
How could I do that?
You can use .next() with :is selector to check if it is div with class clear. and you can use .after() or insertAfter() to append the clear div based on first condition:
if(!$('.brandModelLineWrapper').next().is('div.clear')){
$('.brandModelLineWrapper').after("<div class='clear'></div>");
}
Use next() with a specific selector to check
if(!$('.brandModelLineWrapper').next('div.clear').length){
$('.brandModelLineWrapper').after("<div class='clear'></div>");
}

Selecting all but the first child of parent with an ID and then applying action

I want to select all the child elements of a parent element (except the first) with jQuery and I have the below..
$("li:not(:first-child)");
But I'm not sure how I can apply it to just the certain parent ID, would something like this work?
$('#myID').("li:not(:first-child)");
If so, I then want to add an element before the respective <li> tag. Would I then be able to do this with?
$('#myID').("li:not(:first-child)").before('<li>Test</li>');
I'm guessing something above is wrong as it isn't working.
Close, just pass in the selector context:
$("li:not(:first-child)", "#myID")
http://api.jquery.com/jQuery/
jQuery( selector [, context] )
selector: A string containing a selector expression
context: A DOM Element, Document, or jQuery to use as context
EDIT:
My initial answer assumed that you have no more li within the child's li. if you strictly only wants to select the children, use >:
$("#myID > li:not(:first-child)")
There's different solutions:
$("li:not(:first-child)", "#myID"); // see #SiGanteng answer
$("#myID li:not(:first-child)");
$("#myID").find("li:not(:first-child)");
Simple: using the :gt() help selector:
Just do it like: demo fiddle
$("#myID li:gt(0)").before('<li>Test</li>');
If you are concerned about speed :) :
$("#myID").find("li:gt(0)").before('<li>Test</li>');
or like: demo fiddle
$("#myID li:not(:first-child)").before('<li>Test</li>');
Assuming #myID is a ul or ol element, another possible way to get all children but the first is
$('#myID').children().slice(1)

jquery remove specific children

I have the following code :
$('.TopNotificationIcon span').remove();
Can I replace .TopNotificationIcon with this i.e only span exists inside this specific class.
This is the structure
<div class="TopNotificationIcon"><span>xxxxx</span></div>
On click of .TopNotificationIcon, span should be removed.
if you have click event for .TopNotificationIcon you can do something like this
$('.TopNotificationIcon').click(function(){
$('span',this).remove();
});
I would use the find() method, as it seems to be the fastest:
$("div.TopNotificationIcon").click(function() {
$(this).find("span").remove();
});
If you want to remove all span under TopNotification you can do this :
$('div').live('click', function(){
$(this).children('span').remove();
});
It will remove all children in a div.
Yes but youd need to change the line to:
$(this).children('span').remove();
js fiddle: http://jsfiddle.net/UNhhh/1/
Try this...
$('span').remove('.TopNotificationIcon');
This will remove all span elements with the class TopNotificationIcon and also child elements

Remove attribute of HTML tag

Is it possible to remove the attribute of the first HTML <div> tag? So, this:
<div style="display: none; ">aaa</div>
becomes
<div>aaa</div>
from the following:
<div style="display: none; ">aaa</div>
(bbb)
<span style="display: none; ">ccc</span>​
Or pure JavaScript:
document.getElementById('id?').removeAttribute('attribute?')
To remvove it from literally the first element use .removeAttr():
$(":first").removeAttr("style");
or in this case .show() will show the element by removing the display property:
$(":first").show();
Though you probably want to narrow it down to inside something else, for example:
$("#container :first").removeAttr("style");
If you want to show the first hidden one, use :hidden as your selector:
$(":hidden:first").show();
Yes, in fact jQuery has something for this purpose: http://api.jquery.com/removeAttr/
You can use the removeAttr method like this:
$('div[style]').removeAttr('style');
Since you have not specified any id or class for the div, the above code finds a div having inline style in it and then it removes that style from it.
If you know there is some parent element of the div with an id, you can use this code instead:
$('#parent_id div[style]').removeAttr('style');
Where parent_id is supposed to be the id of parent element containing the div under question.
You say "remove the attribute" — do you mean to remove all attributes? Or remove the style attribute specifically?
Let's start with the latter:
$('div').removeAttr('style');
The removeAttr function simply removes the attribute entirely.
it is easy in jQuery just use
$("div:first").removeAttr("style");
in javascript
use var divs = document.getElementsByTagName("div");
divs[0].removeAttribute("style");

Categories

Resources