We Keep Coding

Click event on a link with a unique id

On a page I have links, by clicking them, it deletes an element. This is my code:
Delete input
Delete input
and so on. As you can see, the links differs with ids, so there can be hundreds links with unique ids. I need to remove closest li element to them. I do it in a such way:
$(document).ready(function () {
$('#link0').click(function (e) {
e.preventDefault();
$(this).closest('li').remove();
})
});
It works for id="link0"
I tried to put a numerical part of id into a variable i by doing this:
var i = 0;
$('#link0' + i).click(function (e) {
e.preventDefault();
$(this).closest('li').remove();
})
but I can't figure, how to make it work and how should I increment i(where should I put in the code i++). Any help would be appriciate. Thanks!

You can use classes instead of ids...
You can do it like this:
$(document).ready(function() {
$('.remove-existed-field').on('click', function(e) {
$(this).closest('li').remove();
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>Delete input</li>
<li>Delete input</li>
Hope this helps!

You could use the starts with selector.
$('[id^=link]').click(
It will target all the elements whose id start with link

If you want to process each link a then you could do it on class instead.
Also you can get id of the clicked link if you really need it.
$(document).ready(function () {
$('a.remove-existed-field').click(function (e) {
e.preventDefault();
// $(this).attr('id');
$(this).closest('li').remove();
});
});

Multiple select divs with CTRL pressed

I have 10 divs
<div id="div_1" class="myDivs"></div>
<div id="div_2" class="myDivs"></div>
<div id="div_3" class="myDivs"></div>
...
O want to select 5 of them with a click handler using jQuery.
$(".myDivs").on("click", function() {
console.log('all clicked DIVs IDs...');
}
Is there a functionality to do this with jQuery? I would like to click them and get all IDs of the clicked divs. Thanks for your help!

This does the trick:
$(".markDIV").on("click", function (evt) {
if (evt.ctrlKey)
$(this).toggleClass("marked");
});

Toggle a class on each clicked div, then get an array of the ids of the divs with the class. The clicking of CTRL is a little redundant when using div elements. Try this:
$(".myDivs").on("click", function() {
$(this).toggleClass('selected');
var selectedIds = $('.selected').map(function() {
return this.id;
}).get();
console.log(selectedIds);
});
Example fiddle

add and remove class on same button or element

I'm looking for a way to add and remove class on the same button. So far this is my work in progress. The concept is when I click on the menu button it shows the menu. When I tap on the menu button again. The menu hides
$(document).ready(function(){
$('button.toggle-portfolio').on('click', function(e){
$('.portfolio-contact-form-wrap').addClass('show');
});
});

To achieve this you can use .toggleClass() like so:
$(document).ready(function(){
$('button.toggle-portfolio').on('click', function(e){
$('.portfolio-contact-form-wrap').toggleClass('show');
});
});
JsFiddle example
toggleClass
Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the state argument.
This method takes one or more class names as its parameter. In the first version, if an element in the matched set of elements already has the class, then it is removed; if an element does not have the class, then it is added.
For more information about this function check here
Hope this helps!

You should use $(this) and toggleClass
$(document).ready(function(){
$('button.toggle-portfolio').on('click', function(e){
$(this).toggleClass('show');
});
});
which will add the class back to the specific element that was clicked.
http://api.jquery.com/toggleclass/
http://www.learningjquery.com/2007/08/what-is-this

Try this:
$(document).ready(function(){
$('button.toggle-portfolio').on('click', function(e){
$('.portfolio-contact-form-wrap').toggleClass('show');
});
});

DEMO
$('.toggle-portfolio').on('click', function(e) {
$('.portfolio-contact-form-wrap').toggleClass('show');
});
Try this way

You can use .add() method with .toggleClass():
$(document).ready(function() {
$('button.toggle-portfolio').on('click', function(e) {
$('.portfolio-contact-form-wrap').add(this).toggleClass('show');
});
});
.portfolio-contact-form-wrap {
color:blue;
}
.show {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="toggle-portfolio">Button</button>
<div class="portfolio-contact-form-wrap">
<h1>contact form</h1>
</div>

Use toggleClass('show')
It will add the class on one click and remove the class on the second click.

<script>
$(document).ready(function () {
$('button.toggle-portfolio').on('click', function (e) {
$('.portfolio-contact-form-wrap').toggleClass('show');
});
});
</script>

How to remove class after it been added

So I need a little bit of help. I'm playing around with addClass and removeClass and I can't seem to remove a class after it's set. What I basically want is:
When someone clicks an h3, it adds to its parent div class
When someone clicks a div with added class, class needs to be removed
First step I got out of way and it's working
$(function(){
$('div h3.itemTitle').on('click', function(){
$(this).parent().addClass('active').siblings().removeClass('active');
});
});
Now when I define:
$(function(){
$('div.active').on('click', function(){
$(this).removeClass('active');
});
});
It does nothing, as if it doesn't see classes. It sets only those set in onload...
Help, anyone?

The child element "h3.itemTitle" already had a click event listener on it and the parent can't actually capture the click event.
Your $('div.active').on('click', ...) never actually fires because you click the h3 not the div.
I recommend this approach: http://jsfiddle.net/c3Q6Q/
$('div h3.itemTitle').on('click', function () {
// saves time not to write $(this).parent() everything so i store in a _parent var
var _parent = $(this).parent();
if (_parent.hasClass('active')) {
_parent.removeClass('active');
} else {
_parent.addClass('active').siblings().removeClass('active');
}
});

Try
$('body').on('click','div.active', function(){$(this).removeClass('active');});
Instead of
$('div.active').on('click', function(){$(this).removeClass('active');});

I would go with this way:
$('div').on('click', function(e){
var el = e.target;
if($(el).is('h3') && $(el).hasClass('itemTitle')){
$(this).parent().addClass('active').siblings().removeClass('active');
}else if($(el).is('div') && $(el).hasClass('active')){
$(this).removeClass('active');
}
});

Not sure why every is talking about elements generated outside of the initial DOM load.
Here's a JSFiddle showing that it works: http://jsfiddle.net/H25bT/
Code:
$(document).ready(function() {
$('.itemTitle').on('click', function() {
$(this).parent().addClass('active').siblings().removeClass('active');
});
/* $('.parent').on('click', function() {
$(this).removeClass('active');
}); */
$('.clicky').on('click', function() {
$(this).parent().removeClass('active');
});
});
The reason it's not working for you is that if you put the removeClass click event on the parent div itself, clicking on the child text causes a conflict with which click handler to use, and it won't work out. Code works fine if you don't assign the click to the parent div itself.

Why .attr does not change the attribute in each function?

I have a very simple script that should change links' ids but somehow it is not working. Here is the code :
$(document).ready( function() {
$('mylinks').each(function(index) {
$(this).attr({
'id': 'mylink-'+index
});
});
});
<div class="mylinks">
google
google2
</div>
I have tries changing mylinks to :
div.mylinks
div.mylinks a
but none of them worked. What am I missing ?
EDIT
Most of you are right. I have to use $('.mylinks a').each( ... but the issue was that I was looking at the RMB->Source (where the content is not updated) instead of Inspect Element.

The selector mylinks matches every <mylinks> element on the page.
To match <a> elements that are descendants of a member of the mylinks class you need .mylinks a.

Edit your code and change this:
$('.mylinks a')

Your code refers to the div, not the links. Oh, and you left out the period before mylinks to properly denote the class of the div.
$('mylinks').each( should be $('.mylinks a').each(
Here's a jsFiddle example.
$('.mylinks a').each(function(index) {
$(this).attr({
'id': 'mylink-' + index
});
});​

$('.mylinks a').each(function(){ ... });

Your selector is incorrect for mylinks. It should be $('.mylinks a').each()

class selector starts with . . change the code as below
$('.mylinks a').each(function(index) {
$(this).attr('id', 'mylink-'+index);
});

If mylinks is the class that you give to your link, then you should write $('.mylinks')

You need to tell it to look at the links, not just the div. This works:
$(document).ready( function() {
$('.mylinks a').each(function(index) {
$(this).attr("id", "mylinks"+index);
});
});

$('mylinks') will look for element with tag name mylinks. May be its a typo you should use . for class selector. If you want to select all the anchor elements inside .mylinks and set there ids then use this.
$(document).ready( function() {
$('.mylinks a').each(function(index) {
$(this).attr({
'id': 'mylink-'+index
});
});
});