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.

How to select some elements and append a div after them?

I've bene bursting my head for the last few hours. Here's the situation:
I have a website that has many divs, but many of them share classes (they are equal) but have some different texts. Example:
<div class="summary-title">
I Am That Girl</div>
<div class="summary-title">
I Am That Girl</div>
What I want to do is select each one of these divs and add a span whenever another div is hovered.
I mean, this is what I want to do: hover a div that's before the sumary-title div, a span with a class is appended inside the sumary-title div or out of it, whatever works.
That's what I got so far:
$('summary-title').each(function(index) {
var content = $(index).next().text();
$(index).append("<span class='hover-text'>"+content+"</span>");
});
But I get an error that $ is not defined, probably because it is a closure?
I have no idea what to do. The code seems horrible too — i need to do this quickly and I just can't do. Would anyone help me at least know what to do?
Thanks

append() is already an implicit iteration ( that loops through the set of elements in the jQuery collection.) and it's unnecessary to call .each() .
$('.summary-title').append(function() {
return "<span class='hover-text'>" + $('a', this).text() + "</span>";
});

Outside of making sure you have jQuery on your page and properly referring it, your code should go like:
$('.summary-title').each(function() {
var content = $(this).children('a:first').text();
$(this).append("<span class='hover-text'>"+content+"</span>");
});
Notice:
dot in class selector - $('.summary-title')
this instead of index - $(this)
children selector instead of next
Check demo - Fiddle.
To append this to a preceding element on hover use:
$(document).ready( function() {
$('.summary-title').hover( function() {
var content = $(this).children('a:first').text();
$(this).prev().append("<span class='hover-text'>"+content+"</span>");
});
});

Target next instance of an element/div

I have the following HTML structure and JavaScript file:
.html
<li>
<button class="show-more"></button>
some more elements
<div class="hidden"></div>
</li>
JavaScript
$( ".show-more" ).click(function() {
event.preventDefault();
$( this ).next().slideToggle( "fast", function() {
});
});
I need the click event to toggle the next first instance of .hidden, however the click event is targeting the first element after it and not the next instance of .hidden, any ideas how I can go about it?

nextAll and first:
$(this).nextAll('.hidden').first().slideToggle(...);
This question has more about this: Efficient, concise way to find next matching sibling?

Another possible solution:
$('~.hidden:first', this).slideToggle("fast");
This will match for the first, next sibling of the class .hidden in the context of this.
The ~-selector will reach all following siblings.
Demo
Reference
Next sibling selector
first selector
context of selector

Jquery event - how to select entire DIV excluding some inner area

Think of the following HTML code to apply Jquery:
HTML code:
<div id="outer_div">
<div id="inner_div_1"></div>
<div id="inner_div_2"></div>
<div id="inner_div_3"></div>
</div>
By default, the "outer_div" is hidden. It appears while clicked on a button using Jquery show() function.
I wanted to do the following: On click within anywhere of "outer_div" excluding the area within "inner_div_1" , the "outer_div" would again be hidden. I failed while tried the following codes. What should I amend?
Attempted Jquery 1:
$("#outer_div:not(#inner_div_1)").on("click",function(){
$("#outer_div").hide("slow");
});
Attempted Jquery 2:
$("#outer_div").not("#inner_div_1").on("click",function(){
$("#outer_div").hide("slow");
});
Your support would be highly appreciated.

You need to consider that a click in the inner div is also a click on the outter div. That being said, you just need to check the target and target parents :
$("#outer_div").on("click",function(e){
if(!$(e.target).closest('#inner_div_1').length) $("#outer_div").hide("slow");
});

You can use some of the data in the event
$("#outer_div").on("click",function(e){
if( // Fast check to see if this is the div
e.target.id !=='inner_div_1'
// We limit the 'closest()' code to the outer div. This adds children to the exclude
&& $(this).closest('#inner_div_1, #outer_div')[0].id=='outer_div'){
alert('good click');
}
});
This is a solution for your code now, this works perfect when not too many excluding objects. But no wildcard selectors, which is nice.
And a jsFiddle demo.
Other properties can be used to, like a class:
$("#outer_div").on("click",function(e){
if( e.target.className!=='even'
&& $(this).closest('.even, #outer_div')[0].id=='outer_div'){
alert('yay, clicked an odd');
}
});
I made 7 lines, gave the even ones a class 'even'.

Show/Hide a div on click

i'm writing a small script to show/hide a div when other div is clicked, but I can't get the second div clickable.
Here's my code so far:
$(document).ready(function(){
$('div#ordontia').click(function(){
$(this).next('div#ordontia2').slideToggle("slow");
});
});
http://jsfiddle.net/65AK2/1/
Every time a "button" is clicked a new div with a description should appear on the bottom of the table. (the blue div on the bottom). If another button is clicked then the previous description should close and another one should open in the same place. (not implement yet)
Thanks in advance for any help!

Why do you want to select your element with next if it has an unique ID?
$(document).ready(function(){
$('div#ordontia').click(function(){
$('div#ordontia2').slideToggle("slow");
});
});
more general if you add more divs:
$(document).ready(function(){
$('.botaomedicina').click(function(){
$('#'+$(this).attr('id')+'2').slideToggle("slow");
});
});
with all others closing:
$(document).ready(function(){
$('.botaomedicina').click(function(){
$('.botaomedicinadescription').slideUp("slow");
$('#'+$(this).attr('id')+'2').slideToggle("slow");
});
});

Don't use $.next, it only selects siblings of the current element:
Get the immediately following sibling of each element in the set of
matched elements. If a selector is provided, it retrieves the next
sibling only if it matches that selector.
— jQuery documentation: .next()
Use the normal one:
$('div#ordontia2').slideToggle("slow");

Fixed it.
http://jsfiddle.net/65AK2/2/
firstly, it lookx like your toggled div was mal-formed. I didnt see a for it.
Secondly, if you know what the ID of the other div is, you dont need to say:
$(this).next("#item");
, it would make no sense.

$(document).ready(function(){
$('div#ordontia').click(function(){
$('div#ordontia2').slideToggle("slow");
});
});
remove this ;)

try this
$(document).ready(function(){
$('div#ordontia').click(function(){
$('div#ordontia2').slideToggle("slow");
});
});
updated fiddle http://jsfiddle.net/65AK2/4/

You can do it directly by an ID selector
http://jsfiddle.net/65AK2/3/
$(document).ready(function(){
$('#ordontia').click(function(){
$('#ordontia2').slideToggle("slow");
});
});