Not sure if this is possible.
I want to select all elements with a class name and only affect the one element being hovered at that time and not the whole class. i can't use ids since they are a lot.
$('.hideme').hover(function(){
$('.hideme').hide();
});
and then.
<div class='hideme'></div>
when the above hides, the following shouldn't hide.
<div class='hideme'></div>
<div class='hideme'></div>
<div class='hideme'></div>
If you try to hide by using clss name, then DOM will hide all the element with same name.
So you have to use this keyword for selecting current hovered element.
Try following:
$('.hideme').hover(function(){
$(this).hide();
});
Related
<div id="#("Bottomgrid)" class="dgd2"></div>
var element = document.getElementById("#Bottomgrid");
element.empty();
$('.dgd2').empty()
Instead of deleting only Bottom grid its also removing other Div present in the screen.
jQuery .remove() will remove the set of matched elements from the DOM.
While jQuery .empty() will remove all child nodes of the set of matched elements from the DOM.
Considering if you have your HTML as below :
<div id="Bottomgrid" class="dgd2"></div>
and you want to remove div with id="Bottomgrid"
Then your javascript code will be :
$("#Bottomgrid").remove();
//This is not required as far as I see
//$('.dgd2').empty()
If you have a HTML structure like this:
<div class="holder">
<div id="item1">Hey</div>
</div>
you can simply just use this pure JavaScript code to remove the "item1" element:
var element = document.getElementById("item1");
element.parentNode.removeChild(element);
.empty() doesn't remove element it only removes elements children. use $('#Bottomgrid').remove()
Javascript :
document.getElementById("Bottomgrid").remove();
Jquery:
$( "#Bottomgrid" ).remove();
you should give the div name properly like Below how I am writing the Id. also you need to check properly which div you are going to delete. Because if a nested div present in your page and you are going to delete the div which is having all the child div inside that , then all respective div going to be deleted .
Html
<div id="bottomgridDiv" class="dgd2">
<div id="parentDiv" class="dgd2">
<div id="childDiv" class="dgd2">
</div>
</div>
</div>
Javascript
var element = document.getElementById("#bottomgridDiv");
In JQuery:-
$("#bottomgridDiv").remove();
So now if you wants to delete the bottomgridDiv then what ever the div present inside this is going to delete.
I'm using this to remove the div whenever I call my showresult(); function. I am dynamically creating this div <div class="sampageswrapper">, so this needs to be removed when ever showresult() is called.
function showresult(data) {
jQuery('.sampageswrapper div').remove();
// rest of my code.
}
But unfortunately this div is not removing.
<div class="sampageswrapper">
<div id="image_div" class="img_class" name="image_div">
..........
</div>
</div>
you can use the .samepageswrapper selector only
jQuery('.sampageswrapper').remove();
it should target that specific div.
when you use .sampageswrapper div as your selector, this targets all the div's inside the div element with sampageswrapper class
I'm trying to implement the jQuery toggle item in my Rails 3.2.1 app.
I would like the toggle to work for each individual <li> item on the <ul>, so I can target which element to hide/show individually. But for some reason, only the top element has the toggle effect; the rest are not responding.
Here's the jsFiddle.
Can anyone explain why this is happening?
It’s because your divs all have the same id, which is invalid HTML. Since the DOM is only expecting there to be one element with any given ID, then when you write $("#trigger"), it only selects the first one it finds. Change the ID to a class.
<div class="trigger"> ...
And change your ID selector to a class selector.
$('.trigger').click(/* ... */);
jsFiddle
ID attributes must be unique on the page. Change all the id="trigger" to class="trigger" then try:
$(".trigger").click(function (){
$(this).find('.menu-item').toggle();
});
JSFIDDLE
$(".trigger").click('.menu-item', function () {
$(".menu-item", this).toggle();
});
Multiple elements with the same id is invalid HTML, and jQuery will only target the first that it finds with that id.
I updated your fiddle to use a class instead of ids
<div id="trigger" class="trigger">
Then:
$(".trigger").click(function (){
$(".menu-item", this).toggle();
});
to target the class and not the id.
Why do the elements have the same ids? An ID should be unique. If you want to select all the <li>s, use a CSS selector like $(".toggle-li").
I am working with the google maps drawing manager. They don't put id's or class names on the drawing tools button bar so I'm trying to do this myself.
First I want to remove the circle button which the below works fine, but I want to add my own button so need to add a class name to the parent div "gmnoprint" but google has about 5 div's all with the same class name. I just want to add it to the one where the circle button was found.
<div class=gmnoprint"></div>
<div class=gmnoprint"></div>
<div class=gmnoprint"></div>
<div class=gmnoprint">
<div>
<div> <== This is what I found in my search
<span>
<div>
<img></img>
</div>
</span>
</div>
</div>
</div>
I am able to find the element I want and remove it, but adding a class to its wrapper div is proving a bit difficult for me.
This works for removing the button
$(".gmnoprint").each(function(){
$(this).find("[title='Draw a circle']").remove();
});
This doesn't work.. Just add's the class to all ".gmnoprint" div's
$(".gmnoprint").each(function(){
$(this).find("[title='Draw a circle']").remove().parent().addClass("test");
});
remove() removes the element from the DOM and returns the free-standing jquery object which has no connection to the DOM at all. A call to parent() after calling remove() is incorrect and that likely is the cause for your issue.
Try splitting your statements to:
var toRemove = $(this).find("[title='Draw a circle']");
toRemove.parent().addClass("test");
toRemove.remove();
You can use jQuery insertAfter and out your button after that default button then remove it.
$(".gmnoprint").each(function(){
var defBtn = $(this).find("[title='Draw a circle']");
$('<button class="my-button" />').insertAfter(defBtn);
defBtn.remove();
});
Or use jQuery after like this:
$(".gmnoprint").each(function(){
$(this)
.find("[title='Draw a circle']")
.after($('<button class="my-button" />'))
.remove();
});
You can use child selector to target the elements
$(".gmnoprint > div > div").addClass('myClassName');
At that point you could replace the html of the whole div , or find the span and replace it's inner html. Using html() method you don't need to use remove() as it will replace all contents of the element(s)
$(".gmnoprint > div > div").addClass('myClassName').find('span').html('<newButton>');
API Reference : http://api.jquery.com/child-selector/
When using jquery-ui-1.8.15.custom.min toggle method, the element next to the target element is always hidden.
Here is the test page: http://jsfiddle.net/dassio/CLrMx/9
I want the div with class name suggestion to toggle between hidden and show when you click the button, but why the red line is always missing?
This should do the job:
http://jsfiddle.net/CLrMx/15/
Your script was accidentally hiding your text. Cleaned it up a bit so it olny does the necessary.
I found the problem:
<div id="config" class='name ui-widget-content ui-corner-all'>
<button id="details">show details</button>
</div>
I add the name class name to the parent div around the button, and when the event bubble up to the parent div, the following code:
$(".name" ).click(function() {
var clicked = $(this);
var suggestion = clicked.next();
suggestion.toggle("fold",200);
return false;
});
was called and toggle off the <h3> element which is the next element of the parent div.