Hi i am trying to remove an item that is hyperlinked with Jquery and it doesn't seem to be working out that good, can someone shed a little light? Thanks.
HTML Code:
<ul id="displayAgency">
<li>Item One
</li>
<li>Item Two
</li>
<li>Item Three
</li>
<li>Item Four
</li>
</ul>
Jquery:
$('#displayAgency').click('click', function () {
$("li itemDelete").remove();
return false;
});
You are missing the class selector :
$("li .itemDelete").remove(); //Which is a dot
You might wanna note that this will delete all li no matter which one you click and go back to the top of the page.
Are you looking for this instead?
$('#displayAgency .itemDelete').on('click', function (e) {
$(this).remove(); //This remove the 'a' but keep the 'li'
//$(this).parent().remove(); would remove the 'li'
//return false; You should use prevent default
e.preventDefault();
});
Related
The else condition of my if/else is not firing. The condition is for the li.catparent, so that if it is clicked, I can have certain code fired. If one of the other items without 'li.catparent' is clicked, then different code will be fired. Perhaps someone could tell me what I'm missing? My if/else statement is very simple, and I'm not sure why it isn't firing. I definitely missing something.
HTML:
<ul class="portal-filter categorylist" id="filter">
<li class="all"><a class="selected" href="#" data-filter="*">All</a></li>
<li class="category">Category 1</li>
<li class="category">Category 2</li>
<li class="catparent">
<span class="catparenttxt">
Category Parent
<span class="subnavarrow"></span>
</span>
<ul class="subcatlist">
<li class="category">Subcategory 1</li>
<li class="category">Subcategory 2</li>
<li class="category">Subcategory 3</li>
</ul>
</li>
<li class="category">Category 1 and 2</li>
</ul>
jQuery
$('ul.categorylist > li').on('click', function(){
if($(this).hasClass('catparent')){
console.log('category parent clicked');
}
else{
console.log('category without parent clicked');
}
});
or
$('ul.categorylist > li').on('click', function(){
if($(this).hasClass('catparent')){
console.log('category parent clicked');
}
else if(!$(this).hasClass('catparent')){
console.log('category without parent clicked');
}
});
Here's a Fiddle that seems to be working with the simple code.
Here's a fiddle with my entire project code included that shows it isn't working.
This issue appears to be related to the media boxes plugin that you have used. If you take the $('#grid').mediaBoxes({ ... }); part out of the broken JSFiddle you have provided, it works perfectly as expected. You can see this fix in the updated JSFiddle here.
To work around this issue, you need to handle the clicks on the a tags inside the list items as well:
$('ul.categorylist > li, ul.categorylist > li a').on('click', function() {
....
});
The reason is that the click-event is actually only triggered for the li.catparent; this is due to the anchor-elements inside the other lis, that consume the mouse click.
You can add a handler to those, too, to receive the event:
$('ul.categorylist li a').on('click', function(e) {
alert('a inside li clicked');
}
I want to check if the element with the class nav-title also has an active class, if true, slide down the next element (which has a class of .sub-nav) beneath the element with the nav-title class.
Otherwise if no element with the class of nav-title has an active class, find the first element with a class of .sub-nav, show it, go up, add the class of active to the .nav-title
The next code with the on-click functions works just fint, it's just the first one that doesn't.. i've tried to add the class active in the html document itself, but then both the first element and the second gets the class active and no sub nav gets slide down.
$(document).ready(function() {
if ($("#nav").find("nav-title").hasClass("active")) {
$(this).next(".sub-nav").slideDown("fast");
} else {
$("#nav").find(".sub-nav:first").show().prev().addClass("active");
}
$("#nav").on("click", ".nav-title", function() {
$('.active').removeClass("active").next(".sub-nav").stop().slideUp("fast");
$(this).toggleClass("active");
$(this).next(".sub-nav").stop().slideDown("fast");
});
});
Can anybody help?
Also my html looks like this by the way:
<ul id="nav">
<li class="nav-title">Title 1</li>
<ul class="sub-nav">
<li>link 1</li>
<li>link 2</li>
</ul>
<li class="nav-title active">Title 2</li>
<ul class="sub-nav">
<li>link 1</li>
<li>link 2</li>
</ul>
</ul>
My code might be a little messy, i'm just learning jquery as we speak.
Wooops! I made a little live example: http://fiddle.jshell.net/kcWA8/2/
You can't use this in this context the way that you think you can. this inside of the if is not the nav. You're also mising the . before nav-title in your find. Do this instead:
if ($("#nav").find(".nav-title").hasClass("active")) {
$("#nav .nav-title.active").next(".sub-nav").slideDown("fast");
}
Or:
var $active = $("#nav .nav-title.active");
if ($active.length > 0) {
$active.next(".sub-nav").slideDown("fast");
}
I used James Montagne's answer, it worked just fine, looks like I misunderstand this (this) and forgot a dot in front of my class.
Thanks!
I am attempting to build a Jquery/CSS drop down menu and things have been going pretty good so far. I'm pretty new to JQuery and I get it most of the time - however, I cannot figure out what I am doing wrong here.
I am attempting to change the class of one of the drop-down tabs when it is clicked, but it doesn't appear to be working as expected.
You can see the code I have so far over here:
http://jsfiddle.net/utdream/NZJXq/
I have the class "selected" looking how I want the button to look when a button is clicked on, but I cannot seem to make it so the "selected" class is applied on a click event. In theory, this:
<li id="menuProducts">Products
<div id="ProductsMenu">
<ul>
<li>Submenu Item</li>
<li>Submenu Item</li>
</ul>
</div>
</li>
Should change this this on a click event:
<li id="menuProducts">Products
<div id="ProductsMenu">
<ul>
<li>Submenu Item</li>
<li>Submenu Item</li>
</ul>
</div>
</li>
And this is my current jQuery (which doesn't work):
jQuery(document).ready(function () {
$('#menuProducts a:first').on('click',
function () {
$("a:first").removeClass("hasmore");
$("a:first").addClass("selected");
menuSubCloseAll.call(this, 'menuProducts');
$('#menuProducts').find('li').slideToggle(200);
});
});
I've tried rewriting this code in many,many different ways and I'm running out of ideas on what I could be doing wrong.
Anyone out there have any pointers on what I could do to fix this?
Thank you in advance!!
Do it like this:
jQuery(document).ready(function () {
$('#menuProducts a:first').on('click',
function () {
$(this).removeClass("hasmore");
$(this).addClass("selected");
menuSubCloseAll.call(this, 'menuProducts');
$('#menuProducts').find('li').slideToggle(200);
});
});
You were actually changing the class of the first <a> in your page, not the <a> you clicked, which you can access directly in the handler with $(this) .
Did you try use "this" inside the call??
$('#menuProducts a:first').on('click',
function () {
$(this).removeClass("hasmore");
$(this).addClass("selected");
menuSubCloseAll.call(this, 'menuProducts');
$('#menuProducts').find('li').slideToggle(200);
});
It worked for me
I need to dinamically assign a .selected class to the element where I click and also remove any other previous class asigned to the clicked element so I can change CSS class. Maybe this code:
$(this).click(function(){
$(this).addClass('selected');
});
works but what happend if I click in any other LI? Any help to get this work?
EDIT:
Ok see this code:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
By default none have any classes but I click in Item 2 then the HTML should transform on this one:
<ul>
<li>Item 1</li>
<li class="selected">Item 2</li>
<li>Item 3</li>
</ul>
but once again if I click in Item 3 then the HTML should transform on this one:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li class="selected">Item 3</li>
</ul>
This is what I'm trying to do
I'd suggest:
$(selector).click(function(){
$('.selected').removeClass('selected');
$(this).addClass('selected');
});
With regards to the comment left by moonwave99 (below), if you only want to remove the selected class-name from those elements contained within the same parent element:
$(selector).click(function(){
var that = $(this);
that.parent().find('.selected').removeClass('selected');
that.addClass('selected');
});
Though it's worth remembering what element you're clicking, and what the parent will be, for example, clicking on the a in the following HTML:
<ul>
<li>link text</li>
</ul>
Will look within the li for the other .selected elements, and so you should use:
$(selector).click(function(){
var that = $(this);
that.closest('ul').find('.selected').removeClass('selected');
that.addClass('selected');
});
First remove selected class from all li inside ul and then apply class to clicked li.
$('ul li').click(function(){
$('ul li').removeClass('selected');
$(this).addClass('selected');
});
On my travels I discovered that it is not possible to addClass of 'active' to list items in when using bootstrap. So if you are reading this (as I was) wondering why this doesn't work when the classname is 'active' you need to choose something else.
Sorry for the vague title, but I couldn't find an appropriate title, explaining the problem well.
The problem: I wrote a code that toggles lists. It works the way I want it. When I click on the the 'headcategory' it opens the subcategories, etc. The problem occurs when I click on the headcategory for the first time, it opens every list, which is not what I want. When I close and open it again, it works the way it should be. I'm trying to figure out why it does that, but I've no clue. So if someone could help me, he/she would be greatly appreciated.
JQuery code.
$(document).ready(function()
{
$('ul.subcat').hide();
$('li').click(function(event)
{
event.stopPropagation();
$('ul', this).toggle();
});
});
HTML code
<ul class="headcat">
<li>item 1
<ul class="subcat">
<li>subitem 1
<ul class="subcat">
<li>subsubitem 1
<ul class="subcat">
<li><p>text</p></li>
</ul>
</li>
<li>subsubitem 2
<ul class="subcat">
<li><p>text</p></li>
<li>subsubsubitem 1
<ul class="subcat">
<li><p>text</p></li>
</ul>
</li>
<li>subsubsubitem 2</li>
</ul>
</li>
</ul>
</li>
<li>item 2</li>
</ul>
</li>
</ul>
You need to only select direct descendants of the currently clicked li, try this:
$(this).children("ul").toggle();
The following will also work, however it's not considered best practice to use the > descendant selector without a primary element before it.
$('> ul', this).toggle();
Example fiddle
Or try to hide the first subcat only on init:
$('ul.subcat:first').hide();
DEMO here: http://jsfiddle.net/kv4dT/