We Keep Coding

Active class not working properly

I have some menu items and in the menu I have a plus(+) sign. When I click on the plus sign it should add a class and look like cross. It is happening but when I click the cross sign it does not removing the sign so that I can get the plus sign again.
$(document).ready(function(){
$('.nav-link').click(function(){
$('.nav-link').removeClass('addplus');
$(this).addClass('addplus');
});
});
Here is the Example.

The issue is because you are always removing, then immediately adding the class back on the clicked element. To fix this exclude the current element from the removeClass() call using not(), then use toggleClass() to add/remove the class to the required element, like this:
$('.nav-link').click(function() {
$('.nav-link').not(this).removeClass('addplus');
$(this).toggleClass('addplus');
});
Updated fiddle

I've gone a bit around about the houses here, but this works using parent and siblings:
$('.nav-link').click(function() {
$(this).parent(".nav-item").siblings().children(".nav-link").removeClass('addplus');
$(this).toggleClass('addplus');
});
I wouldn't do a blanket removeClass across all matching elements like you've done, I'd pick them out by excluding the currently matched element. Revised fiddle: https://jsfiddle.net/epqxb6L7/5/

It's because your code is removing and adding the same class every time click event triggers. Try something like this
$(document).ready(function(){
$('.nav-link').click(function(){
$(this).toggleClass('addplus'); //THIS WILL ADD/REMOVE CLASS ALTERNATIVELY
});
});

You always add the class addplus in the last line of your click handler. Try the following instead:
$(document).ready(function(){
$('.nav-link').click(function(){
if ($(this).hasClass('addplus')) {
$(this).removeClass('addplus');
} else {
$(this).addClass('addplus');
}
});
});

Jquery Function add class and remove class on multiple buttons but only execute specific button clicked

Hello I seem to be stuck on this certain code. I have multiple buttons on my website that when you click one, it changes classes & the text inside then revert back after clicking again. It seems to only work on one button but there are multiples of buttons with the same ID & when they are clicked nothing happens. Heres the codeenter code here
$('#btnInfo').click(function()
{
if ($(this).text() == "More Info")
{
$(this).text("Cancel").addClass('btn-danger');
}
else
{
$(this).text("More Info").removeClass('btn-danger');
};
});
Im not to sure only one button gets the function while the others stay the same when i click them but I want all the buttons to execute the code above but onlt to the button i specifically clicked with the ID

First, you cannot have more than one element with the same "ID", so use class instead.
I think what you want is to bind the event click to all your buttons, do this instead.
$('.className').on('click', function(e){
if ($(this).text() == "More Info")
{
$(this).text("Cancel").addClass('btn-danger');
}
else
{
$(this).text("More Info").removeClass('btn-danger');
};
});
Check the link for more info : http://api.jquery.com/on/

It's unclear what you are looking exactly
If you are looking for this functionality for all the buttons, you need something like this.
$('button').click(function() //see changed css selector
{
if ($(this).text() == "More Info")
{
$(this).text("Cancel").addClass('btn-danger');
}
else
{
$(this).text("More Info").removeClass('btn-danger');
};
});

Your selector is an id #btnInfo in the below line
$('#btnInfo').click(function()
This will select only one button. Use a class, .btnInfo and add it as class attribute to the buttons

How to use event.target inside jQuery child selector?

I want to check if a child-element of a clicked div has a certain class.
So i do this:
$('.panel').on('click', function (event) { if($(".panel input").hasClass('h5_validator_error')) { event.stopPropagation(); } });
The problem: I have more then one .panel class. Since my whole site gets generated by the user and json-files, i need a dynamic environment without ids.
So, actually my if-statement is preventing all .panel-clicks from doing their job.
I want to do something like this:
if($(event.target + ".panel input").hasClass('h5_validator_error')) { event.stopPropagation(); }
So i want to select all input - elements from the clicked div without
having an array and loop through it.
Is this possible? Or what is the most efficient way of selecting child-elements of the clicked one?

You should rather use this to get the targeted element:
$(this).find("input").hasClass('h5_validator_error');
or
$('input',this).hasClass('h5_validator_error');

You shoud make the dom object $(event.target) and then apply the jquery method on it.
Try this:
$('.panel').on('click', function (event) {
if($(event.target).find('input').hasClass('h5_validator_error')){
alert('true');
}
else{
alert('false');
}
});
Working Example

D3 remove click events from one element out of a selection

I have a class in D3 say: selectors and I need to remove the click event from the selection
d3.selectAll('.selectors').on('click',function(){
//Remove the currently clicked element from the selection.
});
Ive got two problems:
The removed element is supposed to be moved to a different part of the page and the I need the click event on it to be removed.
Also, would it be possible to reinsert the removed element into the selection on doing something else, like clicking on the removed element again?
Edit:
Found a solution for problem 1
d3.selectAll('.selectors').on('click',function(){
//Remove the currently clicked element from the selection.
d3.select(this).on('click',null);
});
Is this the right way? Or is there a more graceful method?
A Demo Fiddle

here is the updated jquery it will work for your case
$(document).ready(function(){
$(document).on('click','.selectors',function(e){
//$(document).off( 'click','.selectors');
if(e.target.onclick==null)
{
e.target.onclick=
function(){
void(0);
};
alert('test');
console.log('Hello');
}
});
});

For problem 1, the best method(as far as I know) is to redefine the click event in D3 itself:
d3.selectAll('.selectors').on('click',function(){
//Remove the currently clicked element from the selection.
d3.select(this).on('click',null);
});
For problem 2, however, once you turn a click event callback to null, the only way is to redefine the click event again, perhaps recursively:
function clickDefine() {
d3.selectAll('.selectors').on('click', function () {
//Remove the currently clicked element from the selection.
console.log('Hello')
d3.select(this).on('click', null);
setTimeout(function(){clickDefine();},1000)
});
}
This function makes the click event inactive for 1 second on click. And reactivates this again. I'm hoping this is an effective solution.

Trigger event on specific condition

I have a div that will serve as container to other element, I have buttons that add element to that div.
Please see the demo for a get an idea about it.
So, what I want to do is to check before adding a new element is the div reached a maximum number of elements that I define, let's say 4.
I can check this condition before every add, but I am sure this is not the best way (we learned that if the code contains copy/paste then is not the best solution) Also, this is just a sample, in my case, I have many buttons..
Is there a way to have a listener like this?
$('#container').bind('divFull', function(){
//My code
});
So that I can disable buttons..

First, you have to listen to DOM change event, then you can trigger a custom event based on the number of children
$('#container').bind('DOMSubtreeModified', function(){
if($(this).children().length>=4){
$(this).trigger('divFull');
}
});
then you can bind to your custom divFull event
$('#container').bind('divFull', function(){
alert('container is full');
$('button').prop('disabled',true);
});
a working demo based on your example

I change a bit the #skafandri method because the event DOMSubtreeModified doesn't work on IE < 9 and it's depreciated.
The main change is to create a function which will call the divFull event if their is 4 children in the container.
var checkFull = function() {
if ($container.children().length === 4) {
$container.trigger('divFull');
}
}
$('#button1').click(function(){
$container.append('<div class="element">some text</div>');
checkFull();
});
Here is the demo.