JS:
$(function(){
$(".remove").click(function(){
$("<need the right selector>").hide();
});
});
HTML:
<div class="tag-collection">
<div class="key">PULMONARY_EMBOLISM <span class="remove">✘</span></div>
</div>
I would ilke the above jQuery code to delete the entire div tag-collection. However, I will have many tag-collection divs on the page, and I want to make sure that when someone clicks the remove button that it only deletes the tag-collection div that the remove button was contained in.
If you have a lot of them, this will bind fewer listeners, so it's more "efficient"/lighter-weight:
$(function(){
$(document).on('click', 'span.remove', function() {
$(this).closest('.tag-collection').hide();
});
});
$(function(){
$(".remove").click(function(){
$(this).parents('.tag-collection').hide();
});
});
Emphasis on line #3.
Edit: As Kevin B states below, replacing parents() with closest() is probably better, since that will only select one ancestor.
$(".remove").click(function(){
$(this) // points to clicked element
.closest('.tag-collection') // jump to parent tag-collection
.hide(); // hide that
});
You can use the closest method, try this:
$(function(){
$(".remove").click(function(){
$(this).closest('.tag-collection').remove();
});
});
Related
I have some menu items and in the menu I have a plus(+) sign. When I click on the plus sign it should add a class and look like cross. It is happening but when I click the cross sign it does not removing the sign so that I can get the plus sign again.
$(document).ready(function(){
$('.nav-link').click(function(){
$('.nav-link').removeClass('addplus');
$(this).addClass('addplus');
});
});
Here is the Example.
The issue is because you are always removing, then immediately adding the class back on the clicked element. To fix this exclude the current element from the removeClass() call using not(), then use toggleClass() to add/remove the class to the required element, like this:
$('.nav-link').click(function() {
$('.nav-link').not(this).removeClass('addplus');
$(this).toggleClass('addplus');
});
Updated fiddle
I've gone a bit around about the houses here, but this works using parent and siblings:
$('.nav-link').click(function() {
$(this).parent(".nav-item").siblings().children(".nav-link").removeClass('addplus');
$(this).toggleClass('addplus');
});
I wouldn't do a blanket removeClass across all matching elements like you've done, I'd pick them out by excluding the currently matched element. Revised fiddle: https://jsfiddle.net/epqxb6L7/5/
It's because your code is removing and adding the same class every time click event triggers. Try something like this
$(document).ready(function(){
$('.nav-link').click(function(){
$(this).toggleClass('addplus'); //THIS WILL ADD/REMOVE CLASS ALTERNATIVELY
});
});
You always add the class addplus in the last line of your click handler. Try the following instead:
$(document).ready(function(){
$('.nav-link').click(function(){
if ($(this).hasClass('addplus')) {
$(this).removeClass('addplus');
} else {
$(this).addClass('addplus');
}
});
});
I have one problem about add and remove class in my javascript code.
I have created this DEMO from codepen.io
So you can see in demo there is a Click here link. When you click the link then jquery doing
$(document).ready(function() {
$('.buton').click(function (event) {
event.preventDefault();
$('.vduzalani').animate({'opacity':'.50'}, 300, 'linear');
$('.vduzalani').css('display', 'block');
$(this).next('.yazi-paylas').toggleClass('in');
})
});
Then problem is i want to add a .in from .yazi-paylas div tag. What is the problem in my javascript code
That is because .buton is the only child node of its parent and .next() will return nothing, as seen in your markup:
<div class="container">
<div class="buton">Click Here</div>
<!-- .buton is the ony sibling! -->
</div>
<div class="yazi-paylas">ssss</div>
<div class="vduzalani"></div>
You can use .parent('.container') (or just .parent()) or .closest('.container') to go one level up, and select the immediate sibling of .container:
$(document).ready(function() {
$('.buton').click(function (event) {
event.preventDefault();
// You can use chaining, so you don't have to fetch $('.vduzalani') twice
$('.vduzalani')
.animate({'opacity':'.50'}, 300, 'linear')
.css('display', 'block');
// Tranverse DOM
$(this).parent().next('.yazi-paylas').toggleClass('in');
// or
// $(this).closest('.container').next('.yazi-paylas').toggleClass('in');
});
});
See demo fiddle here: http://jsfiddle.net/teddyrised/0g9385k1/
Please try:
$('.yazi-paylas').toggleClass('in');
instead of
$(this).next('.yazi-paylas').toggleClass('in');
Evaluate the parent to get the .yazi-paylas element. Change your code to:
$(this).parent().next('.yazi-paylas').toggleClass('in');
Or, if it doesnt matter the parent, just do:
$('.yazi-paylas').toggleClass('in');
Try to replace your line with this:
$(this).parent().next('.yazi-paylas').toggleClass('in');
$(this) in this case is actually one level deeper than the element you are trying to select.
hi jquery folks I have a jquery datepicker from jqueryui.com/datepicker/. Now i want to add some custom features to it.
The first question, If I enter the source of my page i cannot see the printed jquery code.
Only when I inspect the element(in opera) I can see the printed html. I hope this is not a problem..
When i click on the Next (span)button, i want to do some things. But the problem is I am not able to attach a function to the span class. I tried the following:
$(document).ready(function () {
$('.ui-icon.ui-icon-circle-triangle-e').click(function(){
window.alert("it works");
});
});
this code appears when I inspect the element:
<a class="ui-datepicker-next ui-corner-all ui-state-hover ui-datepicker-next-hover" data-handler="next" data-event="click" title="Next">ev
<span class="ui-icon ui-icon-circle-triangle-e">Next</span>
</a>
How can this function on click work?
you have the selector wrong
.ui-icon ui-icon-circle-triangle-e
Looks for a element with class ui-icon-circle-triangle-e inside another element with class ui-icon.
When you want to select an element that has more than one class applied to it they need to be seperated by a period .
use
$("body").on('click', ".ui-icon.ui-icon-circle-triangle-e",function(){
window.alert("it works");
});
or just
$("body").on('click', ".ui-icon",function(){
window.alert("it works");
});
You are not calling it properly, it needs to be:
$('.ui-icon.ui-icon-circle-triangle-e').click(function(){
alert ('it works');
});
You made a blank instead of a point between your two classes in jquery.
$(document).ready(function () {
$('.ui-icon.ui-icon-circle-triangle-e').off('click').on('click',function(){
alert("Working");
});
});
If you are attaching event directly on the element better to use off and on.
Cheers !!
I'm trying to write a function in jQuery that will add a class to a selected link (which opens a page in an iframe) then remove that class when another link is selected. I received some help from another member here before for a similar type of thing, but that involved radio buttons and tables.
I tried playing with it for awhile, but jQuery is still pretty new to me so I don't know a whole lot about it.
Basically, I have about 3-4 groups of links contained in <div id="CollapsiblePanelContent"> ... </div> and I would like to add a style to the <a> tag within this container that the user selected.
Any help would be greatly appreciated. Thank you.
<div id="CollapsiblePanelContent">
Link1
Link2
Link3
Link4
</div>
<script type='text/javascript'>
$(function() {
$('div').click(function(event) {
$(this).closest('.CollapsiblePanelContent').addClass('selected').parent().siblings().each(function() {
$(this).find('.CollapsiblePanelContent').removeClass('selected');
});
});
});
</script>
$('#CollapsiblePanelContent a').on('click', function(e){
e.preventDefault(); // prevent page reload, you may remove it if don't need
$(this).addClass('selected').siblings().removeClass('selected');
});
As CollapsiblePanelContent is id so correct selector will be #CollapsiblePanelContent not .CollapsiblePanelContent.
But if you use CollapsiblePanelContent for multiple divs then instead of id it should be class with selector .CollapsiblePanelContent. Because multiple elements can have same id.
You can try :
function handlelink(this)
{
$(this).siblings().removeClass('selected');
$(this).addClass('selected');
//do the rest with the click
}
Based on the HTML you've provided the following should work:
$(function() {
$('.CollapsiblePanelContent a').click(function() {
$(this).addClass('selected').siblings().removeClass('selected');
});
});
That binds the click event handler to any <a> elements inside <div class="CollapsiblePanelContent">, which adds the selected class to the clicked link, and removes the same class from all of its siblings.
I have a page and I want to show some paragraphs after clicking a link, before that it should be hidden. So i wrote a simple JQuery code, but the problem is when I click the open link all the other hidden divs are also shown. My code is given below please advice how to solve the issue.
HTML
<div>
Read More
<div class="expand_div">
<img src="images/close_button.gif" width="50" height="12" alt="Close" border="0" />
<p>My hidden content goes here..</p>
</div>
</div>
and I want to repeat the above <div> block 7 times. So when I click the first div's Read more button the remaining 6 hidden divs are also showing!!!
JQuery
<script language="JavaScript">
$(document).ready(function(){
$('a.open_div').click(function(){
$('.expand_div').show();
});
$('a.close_div').click(function(){
$('.expand_div').hide();
});
});
</script>
how to solve this issue..?
any answers would be appreciated!
Thanks
Paul
try this instead of your JQuery code:
<script language="JavaScript">
$(document).ready(function(){
$('a.open_div').click(function(){
$(this).parent().find('.expand_div').show();
});
$('a.close_div').click(function(){
$(this).parent().hide();
});
});
</script>
The problem with your code is that it's selecting ALL divs inside your page. and this is not what you want.
to solve this issue, this code is only limiting the scope of the action to the current link container, so the other divs will remain as is without any change.
Well, the selectors will select all elements with that class. If you keep your structure like this, you can do the following:
$(document).ready(function(){
$('a.open_div').click(function(){
$(this).next().show();
});
$('a.close_div').click(function(){
$(this).closest('.expand_div').hide();
});
});
As the div is the next sibling of the open link, next() will select the div and show it. The close link on the other side is a descendant of the div. closest() will find the closest ancestor that matches the selector.
Of course there are also other ways to select the elements.
See a working DEMO.
In your open event you need to open the "next" element in the DOM:
$('a.open_div').click(function() {
$(this).next().show();
});
In your close event you need to close the enclosing (parent) element:
$('a.close_div').click(function() {
$(this).parent().hide();
});
see http://jsfiddle.net/raybellis/vZbp3/
You are getting all "expand_div" elements and showing them. You need to only select the appropriate elements as related to this element.
<script language="JavaScript">
$(document).ready(function(){
$('a.open_div').click(function(){
$(this).siblings('.expand_div').show();
});
$('a.close_div').click(function(){
$(this).parent().siblings('.expand_div').hide();
});
});
</script>