We Keep Coding

JavaScript loop over clickable elements on click event, and skip the specific clicked element

<div>
<div class="clickable">1</div>
<div class="clickable">2</div>
<div class="clickable">3</div>
<div class="clickable">4</div>
</div>
Upon clicking one of the 'clickable' elements i want to add a new class to all elements with 'clickable' class except the one that has been clicked.
$('.clickable').on('click', function (e) {
$('.clickable').each(function () {
$(this).addClass('new-class')
});
})
How, inside the loop, can i skip the specific element that was clicked?

$('.clickable').on('click', function() {
$(this).removeClass('new-class').siblings().addClass('new-class');
});

This is the simplest to control and read
You do not need the each
$('.clickable').on('click', function(e) {
$('.clickable').addClass('new-class');
$(this).removeClass('new-class');
})
.new-class {
color: red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class="clickable">1</div>
<div class="clickable">2</div>
<div class="clickable">3</div>
<div class="clickable">4</div>
</div>
If they are surely all in the same container, you can use siblings.
To chain you MUST remove before adding
$('.clickable').on('click', function(e) {
$(this)
.removeClass('new-class') // still necessary for the second click of another element
.siblings().addClass('new-class');
})
.new-class {
color: red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class="clickable">1</div>
<div class="clickable">2</div>
<div class="clickable">3</div>
<div class="clickable">4</div>
</div>

There is a not method in jQuery so the simplest thing you can do in my opinion is with the help of not method like below:
$('.clickable').on('click', function (e) {
$('.clickable').not(this).addClass('new-class');
})

Close div when clicking Background div

I want to close a Div when i click on the Background div(SearchBlur).
My problem is if i click on the shown div it closes also.
here is my javascrip code
SearchBlur.addEventListener('click', closePopup);
function closePopup(){
if(counter == 1){
$( "#search_input" ).animate({ "left": "-=300px"}, "normal" );
$('.SearchBlur').fadeOut("normal");
counter = 0;
}
}
here my html
<div class="SearchBlur" id="SB_Back">
<div class="div_container" id="container">
<div class="grid_div">
<div id="gridwrapper">
</div>
</div>
</div>
</div>
the Programm looks like this
i want to close the popup wehn i click on the dark background
sorry for my bad english :D

Use event.stopPropagation(); onclick the child you want
var counter = 1;
$( ".SearchBlur" ).on( "click", function() {
if(counter == 1){
$( "#search_input" ).animate({ "left": "-300px"}, "normal" );
$('.SearchBlur').fadeOut("normal");
counter = 0;
}
});
$( ".div_container" ).on( "click", function() {
event.stopPropagation();
});
.SearchBlur{
background:blue;
}
.div_container{
width:100px;
background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="SearchBlur" id="SB_Back">
<div class="div_container" id="container">
<div class="grid_div">
<div id="gridwrapper">div_container
</div>
</div>
</div>
</div>

Try add a listener to the child div with following code
event.stopPropagation();

Which div are you trying to close?
From what I can see, you're fading out the highest level div, so all markup nested within SearchBlur will also be hidden. I assume you want to target a deeper nested div, for example:
function closePopup(){
if(counter == 1){
$( "#search_input" ).animate({ "left": "-=300px"}, "normal" );
$('.div_container').fadeOut("normal");
counter = 0;
}
}

In a simple way your html looks like:
<div class="blur">
<div class="popup"></div>
</div>
Your JS is just like this:
$('.blur').on('click', function (e){
if (e.target === this)
$(this).fadeOut();
});
Here is codepen: https://codepen.io/alexmoronto/pen/xaKvxg

Click outside div and close div, even if div is not a child of the parent

I have two div's that I open that kinda belong together, but for programming reasons can't be connected. I simplified the code here because it's a lot of code. This is the basic.
<div id="container">
<div id="div1">
<div> when I am clicked I will open div2 </div>
</div>
<div id="div2">
<div> I can be clicked and all the div's stay open </div>
</div>
</div>
And this is the connected JavaScript
$(document).mouseup(function (e) {
var container = $("#div1");
if (!container.is(e.target) && container.has(e.target).length === 0) {
container.hide();
}
});
$(document).mouseup(function (e) {
var container = $("#div2");
if (!container.is(e.target) && container.has(e.target).length === 0) {
container.hide();
}
});
Now what I would like to do is when I click outside div1 it should close div1.
When I click on div1 it opens div2.
Currently with the above when I click in div2 it closes div1, because it is not a child of div1. So it should keep div2 opened.
And when I click outside div1 or div2 it should close the two div's.
How can I combine the two JavaScript codes to get the explained behaviour?
Summary of what I try to accomplish:
Click on the div inside div1 will open div2
Click outside div1 or div2 will close both div1 and div2.
In case the div inside div1 is not clicked and one clicks outside
div1, it should close div1.

Using closest() and a common class makes this simpler
$(document).mouseup(function(e) {
!$(e.target).closest('.content').length && $('.content').hide();
});
$('#div1').click(function() {
$('#div2').show();
})
#div2{display:none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="div1" class="content">
<div> when i am clicked i will open div2 </div>
</div>
<div id="div2" class="content">
<div> i can be clicked and all the div's stay open </div>
</div>
</div>

Pretty theorical....
But requirements are quite clear. I would do it using .stopPropagation().
e.target is the element clicked. If it is a child of an element having a "concurring handler" on the same event, the handler from the parent will execute. Except if you stop the propagation, which you should look at here.
Having a handler on a top-most parent that say "hide all", will will overcome the handler of the child saying somthing else. So in this case... From the child, you do not want the click (or mouseup... or whatever the event) to propagate to the top parent.
In short: .stopPropagation() will keep the event on the releveant element and you can "not care about" any concurring handler from the parents.
$("#div1").on("click", function(e){
e.stopPropagation();
whoAmI(e);
$("#div2").show();
});
$("#div2").on("click", function(e){
e.stopPropagation();
whoAmI(e);
console.log("I was clicked and #div1 stayed opened.");
});
$("#container").on("click",function(e){
$("#div1,#div2").hide();
whoAmI(e);
});
function whoAmI(e){
console.clear();
console.log( "I'm "+e.target.tagName+" "+((e.target.id=='')? "child" : e.target.id) );
}
#container{
height:1000px;
}
#div1, #div2{
border:1px solid red;
padding:2em;
margin:3em;
}
#div2{
display:none;
}
#container>div>div{
border:1px solid blue;
padding:0.5em;
margin:1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="div1">
<div> When I am clicked I will open div2 </div>
<div> I also do the same. </div>
</div>
<div id="div2">
<div> I can be clicked and all the div's stay open </div>
<div> I also do the same. </div>
<div> And me too! </div>
</div>
</div>

I suggest this the code written with jQuery:
$(document).on('click', function (e) {
if ( e.currentTarget.id == 'div1' ) {
$("#div2").show();
} else if ( e.currentTarget.id == 'div2' ) {
$("#div1").hide();
} else {
$("#div1").hide();
$("#div2").hide();
}
return false;
});
or in plain Javascript:
function handleClicks(e) {
var first = document.getElementById('div1'),
second = document.getElementById('div2');
if ( e.currentTarget.id == 'div1' ) {
second.style.display = 'block';
} else if ( e.currentTarget.id == 'div2' ) {
first.style.display = 'none';
} else {
first.style.display = 'none';
second.style.display = 'none';
}
}
document.body.addEventListener('click', handleClicks, false);
Also check the if-else statements there.

Testing if a click is in a div and all its children

I am facing an issue about this.
<div id="1">
<div id="2">
</div>
<div id="3">
<div id="4">
</div>
</div>
</div>
<div id="others_div">
</div>
I want to add the class "hidden" to "1" when I click on something which is not "1" nor one of its children.
Now I am using this but I have a lack of imagination for solving this issue...
document.onclick = function(e)
{
if(e.target.id!="1")
{
$("#1").addClass("hidden");
}
}

Well, to avoid e.stopPropagation() (maybe you want that event to bubble up to some other ancestor) You can check if it is not clicked on #1 nor on it's children like this:
$('body').on('click', function(e) {
if (!((e.target.id== "1") || $(e.target).closest('#1').length)) {
$("#1").addClass("hidden");
}
});

You could use a jQuery check like the following one to check if the current element is your 1 element or traverse the DOM to see if the current target is contained within an element with an ID of 1 :
<script>
$(function(){
// Trigger this when something is clicked
$(document).click(function(e){
// Toggle the hidden class based on if the current element is 1
// or if it is contained in an element with ID of 1
$("#1").toggleClass('hidden',!((e.target.id== "1") || $(e.target).closest('#1').length))
});
});
</script>
Generally, you should avoid using ID attributes that only consists of numbers as they are not valid (ID attributes must begin with a letter). Ignoring this could result in some issues with regards to CSS or jQuery selection.

JQuery
$('body').on( "click", function(e) {
if(e.target.id !== "1")
{
$("#1").addClass("hidden");
}
});

I think you want this
// taken from http://stackoverflow.com/questions/152975/how-to-detect-a-click-outside-an-element
$('html').click(function() {
//Hide the menus if visible
alert('hide');
});
$('#one').click(function(event){
event.stopPropagation();
});
div#one {
background: yellow;
}
div#others_div {
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="one">
div one
<div id="2">
div two
</div>
<div id="3">
div three
<div id="4">
div four
</div>
</div>
</div>
<div id="others_div">
other div
</div>

onmousedown hide/show div

I want to make a function that hides/shows a div when clicking on a button. The idea would be to be able to pass the ID of the div I want to hide through the event. But I'm not quite sure how to do it.
This is what I have done until now:
<div onmousedown="toogleDiv(badges)"> //clicking here should hide div id=badges
Icons v
</div>
<div id="badges">
</div>
<div onmousedown="toogleDiv(items)"> //clicking here should hide div id=items
Items v
</div>
<div id="items">
</div>
<script>
// Hide/show div;
function toogleDiv()
{
}
</script>

function toogleDiv(id){
var s = document.getElementById(id).style;
s.display = s.display === 'none' ? 'block' : 'none';
}
Then you can pass the id in as a string IE instead of toggleDiv(items) use toggleDiv('items')
Example

try
function hideDiv(id)
{
document.getElementById(id).style.display="none";
}