JQuery: .remove() does not work properly - javascript

Here is my html and codes :
<div id="rptCategoryProducts">
<ul class="productsUl">
</ul>
</div>
removing scritp :
$("#btnFilter").click(function () {
$(".productsUl li").each(function () {
this.remove();
});
currentPage = 0;
InfiniteScroll(0, 1000);
});
adding script:
$(".productsUl").append("<li>" + productInnerHtml + "</li>");
But it doesn't remove and also when I watch the steps in Mozilla Firebug I saw it stops after this.remove(); line.
Do you have suggestion?

or even simpler:
$(".productsUl li").remove();
;-)

You need to use $(this) to refer to the li element
$("#btnFilter").click(function () {
$(".productsUl li").each(function () {
$(this).remove();
});
currentPage = 0;
InfiniteScroll(0, 1000);
});
http://jsfiddle.net/Gwbmw/

When you loop through a jQuery object using each, you get the elements themselves, not each element wrapped in a jQuery object. You need to wrap each element in a jQuery object to use the remove method:
$(".productsUl li").each(function () {
$(this).remove();
});
However, you don't even need to loop through the elements, just use the remove method on the jQuery object containing all the elements:
$(".productsUl li").remove();

You need $(this) instead of this -
$(".productsUl li").each(function () {
$(this).remove();
});

You shoud try this:
$(this).remove();
instead of
this.remove();

Missing '$'. Try:
$(".productsUl li").each(function () {
$(this).remove();
});

In each callback, this points to the dom element reference not to the jquery object reference. So you need to get the jquery object reference of the item before calling remove()
$(".productsUl li").each(function () {
$(this).remove();
});
It can be done much easily
$(".productsUl > li").remove()

Strange. It works for me. look at this test:
[link]http://jsfiddle.net/bwqwD/

Related

jquery list item class toggle

I have a simple function to toggle list item class from "active" to "inactive". What is the most efficient way (i.e., using the least amount of code) to set all other list items to "inactive" so that there can only be one "active" list item? Please see below for an example. Thank you
<ul class="menu">
<li id="one" class="active">One</li>
<li id="two" class="inactive">Two</li>
<li id="three" class="inactive">Three</li>
<li id="four" class="inactive">Four</li>
<li id="five" class="inactive">Five</li>
</ul>
<script>
$('#one').click(function () {
if ($(this).hasClass("inactive")) {
$(this).removeClass("inactive").addClass("active");
} else {
$(this).removeClass("active").addClass("inactive");
}
});
</script>
This can work:
$('.menu li').click(function () {
$('.menu li').not(this).removeClass('active').addClass('inactive');
$(this).addClass('active').removeClass('inactive');
});
or
$('.menu li').click(function () {
$('.menu li').removeClass('active').addClass('inactive');
$(this).toggleClass('active inactive');
});
The second method is shorter, but slower.
http://jsperf.com/toggle-vs-add-remove
Edit: This one is shorter and faster:
$('.menu li').click(function () {
$('.menu li').not(this).removeClass('active');
$(this).addClass('active');
});
If performance is really a problem you can store your menu in a variable and perform operations on this variable, like:
var $menu = $('.menu li');
$menu.click(function () {
$menu.not(this).removeClass('active');
$(this).addClass('active');
});
For brevity:
$('ul.menu li').click(function () {
$(this).siblings().attr('class', 'inactive').end().toggleClass('inactive active');
});
JS Fiddle demo (127 characters, whitespace-removed character-count: 115).
Character-counts at JS Fiddle, since brevity was the intent, it seems.
Unfortunately, given the problem identified in the comments, below, a corrected implementation is somewhat more verbose than the (currently-accepted answer), alternatives being:
$('ul.menu li').click(function () {
var t = this;
$(this).siblings().add(t).attr('class', function (){
return t === this ? 'active' : 'inactive';
});
});
JS Fiddle demo (174 characters, whitespace-removed character-count: 133).
Or:
$('ul.menu li').click(function () {
var t = this;
$(this).parent().children().attr('class', function (){
return t === this ? 'active' : 'inactive';
});
});
JS Fiddle demo (176 characters, whitespace-removed character-count: 135).
Of course, white space-removed jQuery does become somewhat unreadable, but still: I claim the, uh, moral victory...
References:
add().
attr().
children().
end().
siblings().
toggleClass().
$('ul li').click(function() {
$('ul li').each(function() {
$(this).removeClass('active');
});
$(this).addClass('active');
});
JSFiddle
If SEO is not important and to use the less amount of code I would say use a radio-button list.
Then you can style and interact in JavaScript by using the ":checked" selector.
If you're already using jQuery UI, you can take advantage of the selectable function. That would get you what you want with the least amount of code.
http://jqueryui.com/selectable/

Why my click not work as expected?

I just try this code:
$("#test").ready(function() {
$(this).click(function() {
alert('clicked!');
});
});
Fiddle here: http://jsfiddle.net/8bfqw/
Why it's still alert when I click outside of the div?
It's because your selector $(#test) is actually $(document) since from the docs:
The .ready() method can only be called on a jQuery object matching the
current document
Whatever you pass inside the selector, it'll be omitted and work on the current document. A shorthand version of $(document).ready(function(){}) is $(function(){}); so you want:
$(function() {
$('#test').click(function() {
alert('clicked!');
});
});
$("#test").ready(function() {
$("#test").click(function() {
alert('clicked!');
});
});
$("#test").ready(function() {
$("#test").click(function() {
alert('clicked!');
});
});
You have to set the click-function to the Test-object, instead of the whole document $(this).

jquery on() with addClass/removeClass

I have this script which needs to work on an ipad. It was working on chrome with live, however, moving it to on makes it unresponsive.
Any ideas, I would be grateful!
$("#clickAll").on("click", function () {
$(".welcome1poi").show();
$(this).addClass("active");
});
$("#clickAll.active").on("click", function () {
$(this).removeClass("active");
$(".welcome1poi").hide();
});
try this
$("#clickAll").on("click", function(){
$(".welcome1poi").toggle();
$(this).toggleClass("active");
});
updated
as suggested
$(document).on('click',"#clickAll", function(){
$(".welcome1poi").toggle();
$(this).toggleClass("active");
});
since it was working with live() i assume your element with id clickAll is added dynamically so try this
$(document).on("click","#clickAll", function () {
$(".welcome1poi").show();
$(this).addClass("active");
});
$(document).on("click","#clickAll.active", function () {
$(this).removeClass("active");
$(".welcome1poi").hide();
});
you can replace the $(document) selector with your closest element to #clickAll element which will be more efficient
This will delegate the event to the body and it will be caught when it bubbles up the DOM.
$('body').on("click", "#clickAll", function(){
$(".welcome1poi").show();
$(this).addClass("active");
});
$('body').on("click", "#clickAll.active", function(){
$(this).removeClass("active");
$(".welcome1poi").hide();
});
Are you adding and removing the "active" class in order to create a toggle effect? If so, try .toggle(), like so:
$('#clickAll).toggle(
function() { $('.welcome1poi').show(); },
function() { $('.welcome1poi').hide(); });

jQuery Add Class on Click but only allowed once.

Here is what I have so far:
Javascript:
$(document).ready(function() {
$(".thumb_wrapper").click(function() {
$(this).addClass("active");
});
});
So this is working, it is adding the class but I want only one item to be active at all times. So when I click on an item, and it turns active, the next item I click on should be the new active one, and remove the class on the previous one.
Does that make sense? How can I do something like this?
Thanks!
You need to first remove the active class from your thumb_wrapper elements. Try this:
$(".thumb_wrapper").click(function() {
$(".thumb_wrapper").removeClass("active");
$(this).addClass("active");
});
Cache your wrapper and call a removeClass() on it first:
var $wrapper = $(".thumb_wrapper");
$wrapper.click(function() {
$wrapper.removeClass("active");
$(this).addClass("active");
});
$(".thumb_wrapper").on('click', function() {
$(".thumb_wrapper").removeClass('active').find(this).addClass("active");
});
This should do it.
$(document).ready(function() {
$(".thumb_wrapper").click(function() {
$(this).parent().children().each(function() {
$(this).removeClass("active");
});
$(this).addClass("active");
});
});
$(document).ready(function(){
$('.what').click(function(){
$('.what').removeClass('active');
$(this).addClass('active');
});
});
I assume something like this?

JQuery: .index() returns -1

Here's main part of html:
<div id="table">
<div class="table_item">asd</div>
<div class="table_item">asd</div>
<div class="table_item">asd</div>
</div>
And JS (JQuery):
$(document).ready( function()
{
$(".table_item").click( function()
{
alert($("#table").index($(this)));
});
});
click handling works but I ALWAYS get -1 from .index.
trying simply $(this).index(); shows the same result.
Please help! What's wrong with the code?
Do this instead:
$(document).ready( function()
{
var ti = $('.table_item');
ti.click( function()
{
alert(ti.index(this));
});
});
EDIT: Someone had a post that was deleted that was correct, and I think a little better than my code above:
$(document).ready( function()
{
$('.table_item').click( function()
{
alert($(this).index());
});
});
Working examples of both solutions: http://jsfiddle.net/FishBasketGordo/rx5e7/
You need to call index on a collection, in this case divs with class table_item
alert($(".table_item").index(this));
Since you are attaching a click() listener to $(".table_item"), you can reference the object by using $(this).
Try:
$(document).ready( function()
{
$(".table_item").click( function()
{
alert($(this).index());
});
});

Categories

Resources