jquery remove specific children - javascript

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

Related

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>");
}

Select a div insinde another div with jQuery

So I try to select a div within another div. My html goes like this:
<div id="Stage_game_page1"><div id="cube0">[...]</div><div id="cube1">[...]</div></div>
I want to select my #cube0 within my Stage_game_page specifically, with jQuery or JS.
The goal of the selection is to use it in an loop.
I tried :
var count =$("#Stage_game_page").children().length;
for(i=0; i<count;i++){
$("#Stage_game_page")$("#cube"+i)[...]
}
I don't understand what I'm doing wrong.
var count =$("#Stage_game_page").children().length;
for(i=0; i<count;i++){
$("#cube"+i);
}
This is sufficient to select the "#cube0"/"#cube1"/"#cube2" etc. especially since ids are always unique. To answer the question $("#cube0", "#Stage_game_page")... that is how you select a div in another div
The id attribute should only be used once! I see above that you're using id="cube0" twice. If you want your divs to be recognized in multiple instances, use a class instead (the . instead of the #). Using the same id twice will probably break your script.
I believe for your html, you could use id "cube0", "cube1", etc., as long as you're ok with entering them manually. That should work for the loop you'd like to use.
Loops through each div that starts with the id cube inside Stage_game_page1
$("#Stage_game_page1 > div[id^='cube']").each(function () {
alert($(this).html());
});
JSFiddle
Child Selctor
Starts with Selector
use each() for loop.
$('#Stage_game_page1').children().each(function(index) {
// your code here with index starts from 0
});
or this using jquery attribute starts with selector
$('#Stage_game_page1').find('[id^="cube"]').each(function(index) {
// your code here
});
You need to use .find() or .children() or the like.
The correct jQuery usage would be
$("#Stage_game_page").find('#cube'+i)
to find a div with that id inside the container #stage_game_page
You have duplicate cube0 in your html code..
and i think the look should contain something like that:
$("#cube"+i)[...]
One another solution is:
$("#Stage_game_page1 div[id='cube0']")

Show each first element in a list of parent elements (jQuery+CSS)

I'm a bit stuck here. I'm trying to show the first div for each section I have using jQuery. There's multiple parent elements .each-business-content-extra which has a few child elements .each. Each .each is set to display none via the CMS, but I want the first .each in each .each-business-content-extra that exists to be set to display:block.
I tried this —
$('.each-business-content-extra .each:first').each(function() {
$(this).show();
});
Any ideas?
Thanks,
R
You can use .eq() to target the first element of each .each class. http://api.jquery.com/eq/
Try this:
$('.each-business-content-extra .each:eq(0)').each(function() {
$(this).show();
});
Alternatively, try this:
$('.each-business-content-extra .each:eq(0)').css('display', 'block');
You can do it your way, but the correct selector is :first-of-type:
$('.each-business-content-extra .each:first-of-type').each(function() {
$(this).show();
});
You can try with this simple one,
$('.each-business-content-extra .each:first-child').show();
Try
$('.each-business-content-extra').find('.each:first').show()
Demo: Fiddle
try this:
$('.each-business-content-extra').children(":first").show();
Turns out it was a combination of everyones...
$('.each-business-content-extra').each(function() {
$(this).find('.each:first').show();
});
Thanks so much.

Find element above another using jQuery

I'm trying to find the element using jQuery from the following html.
<ul class="gdl-toggle-box">
<li class="">
<h2 class="toggle-box-title"><span class="toggle-box-icon"></span>Volunteer Form</h2>
<div class="toggle-box-content" style="">
</div>
</li>
</ul>
What I'm looking to do is when the h2 is clicked find the li above the h2 add a class active to it. Tried a few different calls but no luck.
EDIT
The biggest issue is that there are multiple toggle boxes on a page so something like this works on pages with a single toggle but pages with multiple the result is they all open together.
var gdl_toggle_box = jQuery('ul.gdl-toggle-box');
gdl_toggle_box.find('li').each(function(){
jQuery(this).addClass('item');
});
gdl_toggle_box.find('li').not('.active').each(function(){
jQuery(this).children('.toggle-box-content').css('display', 'none');
});
gdl_toggle_box.find('h2').click(function(){
if( jQuery('.item').hasClass('active') ){
jQuery('.item').removeClass('active').children('.toggle-box-content').slideUp();
}else{
jQuery('.item').addClass('active').children('.toggle-box-content').slideDown();
}
});
You can use closest.
closest will match the first parent element that matches the selector traversing up the DOM tree.
Demo
$('h2.toggle-box-title').click(function(){
$(this).closest('li').addClass('active');
});
Try this.
$('h2.toggle-box-title').click(function(){
$(this).parent().addClass('newclass');
});
try this:
$('h2.toggle-box-title').click(function() {
$(this).parent('li').addClass('active');
});
On you click in the button you can use the event:
$("something").parent().find("h2.myClass");
// And if you want you can add class after you find you object
http://api.jquery.com/find/
Selecting an element's parent
In order to select an element parent, you can use the parent() function.
Try this:
$('h2.toggle-box-title').click(function() {
$(this).parent('li').addClass('active');
});
*to be more specific, you target the parent you would like to choose by specifying its selector
Check the jQuery API Documentation here
parent() - Get the parent of each element in the current set of matched elements,
optionally filtered by a selector.

Easy - Select only elements of this link

How do I change only elements inside of the link that is clicked?
I thought children of this would work but no luck.
$('.sort').click(function () {
$(this).children('i').toggleClass('icon-arrow-up-12');
});
Use find (api.jquery.com/find), like this:
$(this).find('i').toggleClass('icon-arrow-up-12');
Children are the immediate nodes beneath the current one. You need descendants. You also need to set the context:
$('.sort').click(function () {
$('i', this).toggleClass('icon-arrow-up-12');
});
If I understand you well:
$('.sort').click(function () {
$(this).toggleClass('icon-arrow-up-12');
});
.children() should actually work ..
It is difficult to say without knowing the HTML... If you are trying to get to the nested elements
You can use .find()
$(this).find('.i') OR find('#i')
What is i here .. is it class element or ID ..

Categories

Resources