We Keep Coding

jQuery .remove() removes all my children from the container not just one

Im working on building out a full page transition using aJax calls. I want to remove content from the DOM when I load in a new page. Some reason .remove() is removing all the children from the parent container even though Im adding a unique class or ID on it. I've tried several ways of targeting the element I want to remove but it keeps doing the same thing. remove() should only be removing one element, that is the element with the class name 'remove-from-dom' When I use addClass it targets the element correctly.
$(response).prependTo('.swap-content');
var slideWidth = $('.swap-content').width();
$('.ajax-load-in-remove').animate({
left: + slideWidth
}, 1000, function () {
$('.ajax-load-in-remove').css('left', '').removeClass('hide-me');
$('.ajax-load-in-remove').last().addClass('remove-from-dom');
$('.remove-from-dom').remove();
});
my container looks like this
<div class="parent">
<div class="child">
<div>
<div class="child remove-from-dom">
<div>
</div>
.remove() should only be removing the last child in the container but its removing both children. I only have 2 children. I have tried using IDs and have used .last-child and .last()

The problem is that you are doing the removing inside the callback when the animation ends.
But you are running the animation on many elements $('.ajax-load-in-remove').animate, so the callback is fired for each animation ending. And each callback is removing the currently last element.
You can use the .promise which resolves when all animations have completed.
$('.ajax-load-in-remove')
.animate({
left: +slideWidth
}, 1000)
.promise()
.then(function() {
$('.ajax-load-in-remove').css('left', '').removeClass('hide-me');
$('.ajax-load-in-remove').last().remove();
});

If you want to remove the last one .ajax-load-in-remove, use
$('.ajax-load-in-remove').last().remove();
You don't need to add remove-from-dom class to this element, it was just a step more to make an action.

Remove ONE (without id) element from UL jquery

Hi!
My problem is that I'm appending to an UL like that:
$("#tagek").append("<li><a>"+arr[0]+"</a><span class='ex'><a>X</a></span></li>");
So just shortly: I want to make a tag cloud. When someone types a comma, add the tag to the ul list. That works like charm, however I want to add an "X" to the li element so when someone clicks on it, it will be removed.
Something like that:
$(document).on('click','.ex',function(){
var li = $('.ex').closest("li");
li.remove();
});
So when I click on the ".ex" span its' li should disappear. This is working, but EVERY li is removed (logically), because every "X" has the same class.
Any ideas on this?
Maybe with .eq()?
Thank you.

You are experimenting that behaviour because you're removing the closest 'li' of every '.ex' element instead of the one clicked. Use the $(this) selector in the handler instead:
Try:
$(document).on('click','.ex',function(){
$(this).parent().remove();
});

i think u need this if you are using jquery .
$(document).on('click','.ex',function(){
var li = $(this).closest("li");
li.remove();
});

It's because you're re-selecting .ex (which gets all of them) inside the function handler instead of using the one that the event was triggered by.
Fix:
$(document).on('click', '.ex', function() {
$(this).closest('li').remove();
});
Edit: Not enough karma to comment, but alex030293's code should execute faster, but assumes that the element is a direct child as opposed to a descendant. If this is always the case, it's better to use his code. If there might be a situation where the .ex element is encapsulated in another tag, it's better to use mine.

add class to next element jquery click function

I have created a vertical slider and I want the classes to move onto the next div on click (next) and previous on click (prev)
here is my code and fiddle
$(".bxslider-inner:nth-child(4n+1)").addClass('noBlur');
$(".bxslider-inner:nth-child(4n+2)").addClass('Blur1');
$(".bxslider-inner:nth-child(4n+3)").addClass('Blur2');
$(".bxslider-inner:nth-child(4n)").addClass('Blur3');
$("a.bx-next").click(function(){
$(".bxslider-inner:nth-child(4n+1)").next().addClass('noBlur');
$(".bxslider-inner:nth-child(4n+2)").next().addClass('Blur1');
$(".bxslider-inner:nth-child(4n+3)").next().addClass('Blur2');
$(".bxslider-inner:nth-child(4n)").next().addClass('Blur3');
});
$("a.bx-prev").click(function(){
$(".bxslider-inner:nth-child(4n+1)").prev().addClass('noBlur');
$(".bxslider-inner:nth-child(4n+2)").prev().addClass('Blur1');
$(".bxslider-inner:nth-child(4n+3)").prev().addClass('Blur2');
$(".bxslider-inner:nth-child(4n)").prev().addClass('Blur3');
});

Classes seem to be colliding with each other. I'd suggest cleaning current classes before adding the 'blur' classes, e.g. :
$(".bxslider-inner:nth-child(4n+1)").next().removeClass().addClass('bxslider-inner').addClass('noBlur');
etc... Problem is it only works for he first click on the button, as
$(".bxslider-inner:nth-child(4n+1)").next()
Will always be the same element. You now need to find a way to fetch the right elements on your click function.
Some elements here : In bxslider i want to add a class on current slide

They seem to be on the same level of the DOM tree, so you would use:
$(this).next().click();

How to use jQuery to remove divs containing specific text, as well as the HR divider after only the divs removed

On a page that contains a list of <div> blocks, each of which contain location info, and after each <div> there is an <hr>, I need to target and remove all divs that do not have the city Boston in them.
I was able to easily remove those divs with:
$("div.location").not(":contains('Boston')").remove();
That was when I noticed the surplus of leftover <hr>
Would it be better to target and remove all of the dividers first? Then the divs? Can I do both with one stroke of jQuery? Thanks!

$("div.location").not(":contains('Boston')").next('hr').remove().end().remove();​
DEMO
NOTE to comment
$("div.location").not(":contains('Boston')") // return the target div
.next('hr') // take the pointer to hr, next to target div
.remove() // remove the hr
.end() // return the pointer to target div.location again
.remove();​ // remove the target div

Can I do both with one stroke of jQuery
Not that it's any "better", but you can always just chain it, remove the next() HR, then use end() to step back and remove() the div, or do it the other way around removing the div first, does'nt really matter much:
$('div.location').filter(function() {
return $(this).text().indexOf('Boston') == -1;
}).next('hr').remove().end().remove();

The obvious one is $("div.location:not(:contains('Boston')), div.location:not(:contains('Boston')) + hr").remove()​

Use a simple selector, then get the conjunctive hr elements left over
$("div.location:not(:contains('Boston'))").remove().add("hr+hr").remove();
EDIT:
alternate avoid double dom manipulation by direct selection first
$("div.location:not(:contains('how'))").add("div.location:not(:contains('how'))+hr").remove();

Remove all classes except one

Well, I know that with some jQuery actions, we can add a lot of classes to a particular div:
<div class="cleanstate"></div>
Let's say that with some clicks and other things, the div gets a lot of classes
<div class="cleanstate bgred paddingleft allcaptions ..."></div>
So, how I can remove all the classes except one? The only idea I have come up is with this:
$('#container div.cleanstate').removeClass().addClass('cleanstate');
While removeClass() kills all the classes, the div get screwed up, but adding just after that addClass('cleanstate') it goes back to normal. The other solution is to put an ID attribute with the base CSS properties so they don't get deleted, what also improves performance, but i just want to know another solution to get rid of all except ".cleanstate"
I'm asking this because, in the real script, the div suffers various changes of classes.

Instead of doing it in 2 steps, you could just reset the entire value at once with attr by overwriting all of the class values with the class you want:
jQuery('#container div.cleanstate').attr('class', 'cleanstate');
Sample: http://jsfiddle.net/jtmKK/1/

Use attr to directly set the class attribute to the specific value you want:
$('#container div.cleanstate').attr('class','cleanstate');

With plain old JavaScript, not JQuery:
document.getElementById("container").className = "cleanstate";

Sometimes you need to keep some of the classes due to CSS animation, because as soon as you remove all classes, animation may not work. Instead, you can keep some classes and remove the rest like this:
$('#container div.cleanstate').removeClass('removethis removethat').addClass('cleanstate');

regarding to robs answer and for and for the sake of completeness you can also use querySelector with vanilla
document.querySelector('#container div.cleanstate').className = "cleanstate";

What if if you want to keep one or more than one classes and want classes except these. These solution would not work where you don't want to remove all classes add that perticular class again.
Using attr and removeClass() resets all classes in first instance and then attach that perticular class again. If you using some animation on classes which are being reset again, it will fail.
If you want to simply remove all classes except some class then this is for you.
My solution is for: removeAllExceptThese
Array.prototype.diff = function(a) {
return this.filter(function(i) {return a.indexOf(i) < 0;});
};
$.fn.removeClassesExceptThese = function(classList) {
/* pass mutliple class name in array like ["first", "second"] */
var $elem = $(this);
if($elem.length > 0) {
var existingClassList = $elem.attr("class").split(' ');
var classListToRemove = existingClassList.diff(classList);
$elem
.removeClass(classListToRemove.join(" "))
.addClass(classList.join(" "));
}
return $elem;
};
This will not reset all classes, it will remove only necessary.
I needed it in my project where I needed to remove only not matching classes.
You can use it $(".third").removeClassesExceptThese(["first", "second"]);