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();
});
});

javascript jquery accessing the element being clicked

I've got the following list of semibuttons loaded using javascript:
var html ='<ul class="nav well-tabs well-tabs-inverse mb10" id="users">';
html +='<li class="active"><a id="'+this.my.user+'" data-toggle="tab_'+self.my.id+'" class="pestaña">'+this.my.user+'</a></li>';
var users = this.my.community_users;
for (i=0;i<users.length;i++) {
if (users[i].user != this.my.user)
html +='<li><a id="'+users[i].user+'" data-toggle="tab_'+self.my.id+'" class="pestana">'+users[i].user+'</a></li>';
};
html +='</ul>';
$(html).appendTo("#Dashboard");
Note, that the first item in the list is active. I am getting something like this:
Ok, now i code he onclick event to do something when a button is clicked:
$(document).on('click', 'a[data-toggle=tab_'+self.my.id+']', function(e){
// whatever here
});
What I need now is to set active the tab being clicked and set inactive the tab that was active. How can I access both elements to addclass and removeclass active?

You could use following logic:
$(document).on('click', '#users li:not(.active)', function () {
$('#users').find('li.active').add(this).toggleClass('active');
});

Something like this might work. Basically remove the .active class from everything but the element you clicked on. The add the .active class to the element clicked on.
$(document).on('click', 'a[data-toggle=tab_'+self.my.id+']', function (e) {
$('a[data-toggle=tab_'+self.my.id+']').not(this).removeClass('active');
$(this).addClass('active');
});

I would remove the 'active' class from all the list items first, then add it back to just the only that was clicked.
$(document).on('click', 'a[data-toggle=tab_'+self.my.id+']', function (e) {
$('#users .active').removeClass('active');
$(this).addClass('active');
});

how do i remove <p> tag using jquery in rails 4

I have:
$(document).ready(function() {
$("#btn1").click(function() {
$("#po").append("<p><%= j f.datetime_select :dtmRealshow%><a>Remove</a></p>");
});
});
<p id="po"></p>
<button id="btn1">+</button>
When i click on the btn1 a new datetime_select field is added to the form.But i want to remove the parent <p> tag after clicking on the remove link.Please help me out.

Add a css class to anchor
$("#po").append("<p><%= j f.datetime_select :dtmRealshow%><a class='remove'>Remove</a></p>"); });
Then you can use Event Delegation using .on() delegated-events approach to bind click handler to anchor.
$("#po").on('click', ".remove", function(){
$(this).closest('p').remove();
});

Removing the parent <p> will remove it's children along with it.
If that's what you're looking for then try the following code.
$(document).ready(function(){
$("#btn1").click(function(){
$("#po").append("<p><a id='remove'>Remove</a></p>");
$("#remove").click(function() {
$(this).closest('p').remove();
});
});
});
Here is the demo

Jquery hide div and show div

I have my code on jsfiddle which has 2 divs, where the user can select features by clicking on a div. in the opposite div i have the same item but hidden. how can i replace the hidden class?
this is what i have come up with:
$("#Label1").click(function () {
$(this).find('.feature-options1').addClass('hidden');
$(this).parent().closest('.feature-container').prev().find('#SelectedFeatures').find('#Label2').removeClass('hidden');
});
http://jsfiddle.net/X6xcj/9/

is this:
$(this).find('.feature-options1').hide();
$('#label2').find('.feature-options1').show();
what you are trying to achieve?

$("#Label1").click(function () {
$(this).find('.feature-options1').addClass('hidden');
$(this).parent().next().next().find('#Label2').removeClass('hidden');
});
Try this i may help you.

You should use .parent() not .prev() to get the containing div
$("#Label1").click(function () {
$(this).find('.feature-options1').addClass('hidden');
$(this).parent().closest('.feature-container').parent().find('#SelectedFeatures').find('#Label2').removeClass('hidden');
});
Here you go: http://jsfiddle.net/5W48X/
.prev() gives you the previous sibling element.
.parent() gives you the container (parent) element.
EDIT:
I had not even seen the id's you use on divs yet. This should work as well:
$("#Label1").click(function () {
$(this).addClass('hidden');
$('#Label2').removeClass('hidden');
});
http://jsfiddle.net/6Zbsa/

try this:
$(function(){
$(".feature-addons").on('click', function(e){
var lbl = $(this).next();
$(".feature-addons").next().addClass('hidden');
lbl.removeClass('hidden');
});
});

jQuery get css value of clicked link or tell which link was clicked

I've got links on my page like this, which when clicked, call jQuery functions. How can I tell if approve was clicked or delete was clicked. Because I need to do certain things only if accept was clicked, and need not do things if delete were clicked. I cannot change the way those links are named.
<i class="icon-accept blue approve"></i>
<i class="icon-reject blue delete"></i>
$('.approve,.delete').on('click', function() {
if(approved was clicked) {
console.log('Approve was clicked');
}
});

You can check the class using hasClass():
$('.approve,.delete').on('click', function() {
if($(this).hasClass('approve')) {
console.log('Approve was clicked');
}
});
jsFiddle Demo
Alternatively, you can use is():
$('.approve,.delete').on('click', function() {
if($(this).is('.approve')) {
console.log('Approve was clicked');
}
});
jsFiddle Demo

You can use jquery .is():
if($(this).is('.approve')){}

try
$(element).hasClass('className')

You can use .hasClass()
$('.approve,.delete').on('click', function() {
if($(this).hasClass('approve')) {
console.log('Approve was clicked');
}
});