Develop Reference

if one item is clicked, remove the other items?

I'm learning Javascript and jQuery and I'm stuck at this one problem. Let's say my code looks like this:
<div id="hey"> hey </div>
<div id="how"> how </div>
<div id="are"> are </div>
<div id="you"> you </div>
Now, if i click one of the div's, i want the other ones to disappear.
I know, I could create 4 functions for each one of them with on.click hey and display none with how , are and you. But is there a easier way? I bet there is, with classes maybe?
Thanks for responding!

Use siblings to get reference to its "brothers".
Given a jQuery object that represents a set of DOM elements, the .siblings() method allows us to search through the siblings of these elements in the DOM tree and construct a new jQuery object from the matching elements.
$('div').click(function(){
$(this).siblings().hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hey"> hey </div>
<div id="how"> how </div>
<div id="are"> are </div>
<div id="you"> you </div>
Or you can hide all the other div which not the clicked element using not
Remove elements from the set of matched elements.
$('div').click(function() {
$('div').not(this).hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hey"> hey </div>
<div id="how"> how </div>
<div id="are"> are </div>
<div id="you"> you </div>

You can just hide siblings() of clicked div.
$('div').click(function() {
$(this).siblings().fadeOut()
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hey">hey</div>
<div id="how">how</div>
<div id="are">are</div>
<div id="you">you</div>

Yeah there are some easier ways and I could tell a one from it,
Set a common class to all the elements that you are gonna target,
<div class="clickable" id="hey"> hey </div>
<div class="clickable" id="how"> how </div>
<div class="clickable" id="are"> are </div>
<div class="clickable" id="you"> you </div>
And you have to bind a single click event by using a class selector,
$(".clickable").on("click", function(){ });
Now use the .siblings() functions to hide the required elements,
$(".clickable").on("click", function(){
$(this).siblings(".clickable").hide();
});
But using a toggle instead of hide would sounds logical,
$(".clickable").on("click", function(){
$(this).siblings(".clickable").toggle();
});
Since you can do the same operation over all the elements.

You can use not to avoid element and this will indicate current instance.
$(document).ready(function(){
$("div").on("click",function(){
$("div").not(this).hide("slow");
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hey"> hey </div>
<div id="how"> how </div>
<div id="are"> are </div>
<div id="you"> you </div>

Assign a class to each of the elements:
<div id="hey" class='sth'> hey </div>
<div id="how" class='sth'> how </div>
<div id="are" class='sth'> are </div>
<div id="you"class='sth' > you </div>
And write a js function onclick.
Remove class 'sth' from 'this' element in this function
Hide all elements with class 'sth' $('.sth').hide();

For this example - you don't need to add any further selectors to target the div's although in reality - this solution wwould cause all divs on the page to be affectecd - adding classes would be my actual suggestion: - but this works for this example. Click a div and all divs are hidden then the clicked one is shown. I also added a reset button to allow all divs to reappear.
$('div').click(function(){
$('div').hide();
$(this).show();
});
$('#reset').click(function(){
$('div').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hey"> hey </div>
<div id="how"> how </div>
<div id="are"> are </div>
<div id="you"> you </div>
<hr/>
<button type="button" id="reset">Reset</button>

$(document).ready(function(){
$("div").on("click",function(){
$("div").not(this).toggle("slow");
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hey"> hey </div>
<div id="how"> how </div>
<div id="are"> are </div>
<div id="you"> you </div>

Removing sibling div when another span element contains specific text

I am trying to remove div with class=".basket__item-cell.basket__item-qty" only when hidden-sku is equal to "020-01119".
I've tried different approaches using .each(function) or .next() but could not get my head around it. In order to illustrate the example I've added the code bellow.
Please note that I can not add any id's or classes and the order of the rows may vary.
(function($) {
$('.hidden-sku').filter(function() {
return $(this).text().indexOf("020-01119") !== false;
}).closest(".basket__item-cell.basket__item-name").next(".basket__item-cell.basket__item-qty").remove();
})(jQuery)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="basket__item-data basket__item-data--right">
<div class="basket__item-cell basket__item-name">
<h2 class="product-name">One </h2>
<span class="hidden-sku">020-01119</span>
</div>
<div class="basket__item-cell basket__item-price">
<span class="cart-price"><span class="price"><span class="currency"></span>18</span>
</span>
</div>
<div class="basket__item-cell basket__item-qty">
<div class="input-combobox main-input-combobox input-combobox__with-qty" data-label="Qty" data-range-min="1" data-range-max="12">1
</div>
</div>
</div>
<div class="basket__item-data basket__item-data--right">
<div class="basket__item-cell basket__item-name">
<h2 class="product-name">Two </h2>
<span class="hidden-sku">020-01117</span>
</div>
<div class="basket__item-cell basket__item-price">
<span class="cart-price"><span class="price"><span class="currency"></span>18</span>
</span>
</div>
<div class="basket__item-cell basket__item-qty">
<div class="input-combobox main-input-combobox input-combobox__with-qty" data-label="Qty" data-range-min="1" data-range-max="12">2
</div>
</div>
</div>
<div class="basket__item-data basket__item-data--right">
<div class="basket__item-cell basket__item-name">
<h2 class="product-name">Three </h2>
<span class="hidden-sku">020-01118</span>
</div>
<div class="basket__item-cell basket__item-price">
<span class="cart-price"><span class="price"><span class="currency"></span>18</span>
</span>
</div>
<div class="basket__item-cell basket__item-qty">
<div class="input-combobox main-input-combobox input-combobox__with-qty" data-label="Qty" data-range-min="1" data-range-max="12">3
</div>
</div>
</div>

This will do the job and arguably it's easier to understand what it's doing at glance.
I am also assuming the SKU is always going to be 020-01119 and never just containing that string? If that's not the case just put the indexOf back into the if condition.
(function($) {
$('.basket__item-data').each(function () {
var sku = $('.hidden-sku', this);
if (sku.text() === '020-01119') {
$('.basket__item-cell.basket__item-qty', this).remove();
}
});
})(jQuery);

Watch out how you check the presence of string using indexOf():
(function($) {
$('.hidden-sku').filter(function() {
return $(this).text().indexOf("020-01119") > -1;
}).closest(".basket__item-cell.basket__item-name").next(".basket__item-cell.basket__item-qty").remove();
})(jQuery)

.closest(".basket__item-cell.basket__item-name")
.next(".basket__item-cell.basket__item-qty")
.remove();
.next() gets just the very next DOM node, then compares it with the class(es) you've specified.
In your case, you have -price between -name and -qty
<div class="basket__item-cell basket__item-name">
<div class="basket__item-cell basket__item-price">
<div class="basket__item-cell basket__item-qty">
so it gets -name, then the next, which is -price and says, is this -qty, which it isn't, so gives you no matches for .remove().
Here are some ideas to replace the .next():
// Use nextAll()
.closest(".basket__item-cell.basket__item-name")
.nextAll(".basket__item-cell.basket__item-qty")
.remove();
// Use nextAll().first() if you there might be more
.closest(".basket__item-cell.basket__item-name")
.nextAll(".basket__item-cell.basket__item-qty")
.first()
.remove();
// use .siblings
.closest(".basket__item-cell.basket__item-name")
.siblings(".basket__item-cell.basket__item-qty")
.remove();
// Go up to parent, then down
// Most likely to work if the structure changes
.closest(".basket__item-cell.basket__item-name")
.parent()
.find(".basket__item-cell.basket__item-qty")
.remove();
// Go up to parent in one step, then down
// Most likely to work if the structure changes
.closest(".basket__item-data")
.find(".basket__item-cell.basket__item-qty")
.remove();

Jquery find and each selector

I am new to jQuery so please help me with the output.
Below is the HTML code used for reference.
<html>
<body>
<div id="level1">
<p>
<span id="level1.1">
<div id="level1.1.1"></div>
<div id="level1.1.2"></div>
</span>
<span id="level1.2">
<div id="level1.2.1"></div>
<div id="level1.2.2"></div>
</span>
<div id="level1.3"></div>
</p>
</div>
</body>
</html>
When I used following as script
<script type="text/javascript">
$(document).ready(function (){
var div = $("#level1").find("div").each(function(){
alert($(this).attr('id'));
});
});
</script>
The result was 5 alerts with id of each div
But when I used
<script type="text/javascript">
$(document).ready(function(){
var div = $("#level1").find("span > div").each(function(){
alert($(this).attr('id'));
});
});
</script>
There were only two alert for level 1.2.1 and 1.2.2
I was wondering why there was no alert for 1.1.1 and 1.1.2 as they also have span as their parents?
Thanks in advance.
If divs can't be child of
then why is
<p>
<div id="level1">
<span id="level1.1">
<div id="level1.1.1"></div>
<div id="level1.1.2"></div>
</span>
<span id="level1.2">
<div id="level1.2.1"></div>
<div id="level1.2.2"></div>
</span>
<div id="level1.3"></div>
</div>
</p>
Working fine ??

Because of your incorrect HTML.
The browser is going to generate your html as followed.
<p>
<span id="level1.1">
</span>
</p>
<div id="level1.1.1"></div>
<div id="level1.1.2"></div>
Because a div can't be a child of a p
If you remove the first <p> in your code, you wil get an alert of the 4 levels sub levels.

divs cannot be children of p in HTML
Change your HTML markup with the following:
<div id="level1">
<span id="level1.1">
<div id="level1.1.1"></div>
<div id="level1.1.2"></div>
</span>
<span id="level1.2">
<div id="level1.2.1"></div>
<div id="level1.2.2"></div>
</span>
<div id="level1.3"></div>
</div>
and you should yield the expected results !

Because your HTML structure is not correct this how your structure is populated :

.find() method only travels a single level down the DOM tree.
Here you can find it.
The .find() and .children() methods are similar, except that the .find() method only travels a single level down the DOM tree.

jQuery works only on first div

Click works just on first div with id plus but other divs with the same id dont work. I dont know whats the problem... I dont get what the problem is. Please help. Thanks!
Here is the code...
Edited:
<div id="details">
<div id="detailHeader">
<div id="facultyTitle">sadasdas</div>
<div id="title">dsadasdasdas</div>
</div>
<div id="detailReference">
dodaj
<div id="refVote">
<div class="plus" glas="41">Good</div>
<div class="minus" glas="41">Bad</div>
</div>
<div id="referenceInfo">
01:40 PM 06.09.2014.
</div>
</div>
</div>
<div id="detailReference">
dodaj
<div id="refVote">
<div class="plus" glas="37">Good</div>
<div class="minus" glas="37">Bad</div>
</div>
<div id="referenceInfo">
01:38 PM 06.09.2014.
</div>
</div>
</div>
JavaScript
$(".plus").click( function() {
var ref=$(this).attr("glas");
alert(ref);
$.ajax({
url:"url is ok",
success:function(){
}
}
);
});

IDs should be unique. use same class instead of ids.Like this:
<div class="plus" glas="37">Good</div>
and then use:
$(".plus").click( function() {
var ref=$(this).attr("glas");
alert(ref);
$.ajax({
url:"url is ok",
success:function(){
}
}
);

$(".plus").click(...)
not
$("#plus").click(...)
There can and shall only be one item with a certain ID on the page. Use classes on those buttons instead.

Couple of issues. You have mismatched divs. This last div looks like its the culprit.
<div id="details">
<div id="detailHeader">
<div id="facultyTitle">sadasdas</div>
<div id="title">dsadasdasdas</div>
</div> <--this one
Your second issue is that you shouldnt have multiple ids that are the same on a page. Instead set it as a class with
<div class="plus"> Then reference them in jquery with
$(".plus").click( function()

I have to use class if you have more than one div. Try with .plus

Javascript click specific to ID

I have a div setup like so:
<div class="content">
<button class="show-comments" id="content1"></button>
</div>
<div class="comments-wrapper" id="comment1"></div>
<div class="content">
<button class="show-comments" id="content2"></button>
</div>
<div class="comments-wrapper" id="comment2"></div>
I have the following code:
$('.show-comments').click(function(e){
e.preventDefault();
$('.comments-wrapper').slideToggle('slow');
});
As you would assume, the code works but on a class basis. I'd like for it to open up only the .comments-wrapper of its associated id (i.e. open slideToggle comments2 if content 2 button is clicked and so on and so on).
How would I do this?

$('.show-comments').click(function(e){
e.preventDefault();
$(this).closest(".content").next('.comments-wrapper').slideToggle('slow');
});
Note that this is dependent on the .content element being immediately followed by the .comments-wrapper.
If you have access to modify the html itself, I would suggest adding a wrapper element and then doing the following to avoid the reliance on the exact order of elements:
<div class="wrapper">
<div class="content">
<button class="show-comments" id="content1"></button>
</div>
<div class="comments-wrapper" id="comment1"></div>
</div>
<div class="wrapper">
<div class="content">
<button class="show-comments" id="content2"></button>
</div>
<div class="comments-wrapper" id="comment2"></div>
</div>
$(this).closest(".wrapper").find('.comments-wrapper').slideToggle('slow');
This way, if you add an element between the .content and the .comments-wrapper it does not break the code.

You can do this:
$(this).parent("div").next('.comments-wrapper').slideToggle('slow');
This will find the related div of class .comments-wrapper and slide toggle.
And a fiddle: http://jsfiddle.net/xCJQB/

$('.show-comments').click(function (e) {
e.preventDefault();
var num = this.id.match(/\d+$/)[0];
$("#comment" + num).slideToggle('slow');
});
Demo ---> http://jsfiddle.net/7pkyk/1/

Use this context
$(this).closest('.comments').next('.comments-wrapper').slideToggle('slow');
If it is not the immediate element then you might try this as well
$(this).closest('.comments')
.nextAll('.comments-wrapper').first().slideToggle('slow');

you can add a common class to associate a button with a div.
html:
<div class="content">
<button class="show-comments group1" id="content1"></button>
</div>
<div class="comments-wrapper group1" id="comment1">1</div>
<div class="content">
<button class="show-comments group2" id="content2"></button>
</div>
<div class="comments-wrapper group2" id="comment2">2</div>
javascript:
$('.show-comments').click(function(e){
var associate = $(this).attr('class').match(/group\d+/).pop();
var selector = '.comments-wrapper.' + associate;
e.preventDefault();
$(selector).slideToggle('slow');
});
http://jsfiddle.net/uMNfJ/