We Keep Coding

Remove ONE (without id) element from UL jquery

Hi!
My problem is that I'm appending to an UL like that:
$("#tagek").append("<li><a>"+arr[0]+"</a><span class='ex'><a>X</a></span></li>");
So just shortly: I want to make a tag cloud. When someone types a comma, add the tag to the ul list. That works like charm, however I want to add an "X" to the li element so when someone clicks on it, it will be removed.
Something like that:
$(document).on('click','.ex',function(){
var li = $('.ex').closest("li");
li.remove();
});
So when I click on the ".ex" span its' li should disappear. This is working, but EVERY li is removed (logically), because every "X" has the same class.
Any ideas on this?
Maybe with .eq()?
Thank you.

You are experimenting that behaviour because you're removing the closest 'li' of every '.ex' element instead of the one clicked. Use the $(this) selector in the handler instead:
Try:
$(document).on('click','.ex',function(){
$(this).parent().remove();
});

i think u need this if you are using jquery .
$(document).on('click','.ex',function(){
var li = $(this).closest("li");
li.remove();
});

It's because you're re-selecting .ex (which gets all of them) inside the function handler instead of using the one that the event was triggered by.
Fix:
$(document).on('click', '.ex', function() {
$(this).closest('li').remove();
});
Edit: Not enough karma to comment, but alex030293's code should execute faster, but assumes that the element is a direct child as opposed to a descendant. If this is always the case, it's better to use his code. If there might be a situation where the .ex element is encapsulated in another tag, it's better to use mine.

jQuery onclick show first parent div

I have an issue with a show of a parent div at onclick.
As here:
$('#click').click(function() {
$(this).parent().closest('div').slideToggle("fast");
});
http://jsfiddle.net/bk1hLoyb/
I need to show the .show div at the li click, and i need to hide the first when i click another.
Someone know's a method?
Thanks so much

Id's should be unique on the page.
$('.click').click(function() {
$('.show').hide();
$(this).find('.show').slideToggle("fast");
});
http://jsfiddle.net/bk1hLoyb/11/

First Id's must be unique so change it for:
<li class="click">
Bye
<div class="show">Hey</div>
</li>
and the code change it for:
$('.click').click(function() {
$(this).find('div').slideToggle("fast");
});
LIVE DEMO

Some suggestions:
remove all duplicate IDs
if you must use a selector on the li elements, use a class
.show is a child of the li that's clicked, so there's no need to use .parent() or .closest().
Code:
$('.click').click(function() {
$('.show', this).slideToggle("fast");
});
DEMO
BONUS
$(elm).find('.selector') is equivalent to $('.selector', elm)
Also written as jQuery( selector [, context ] )
When context is not specified, it is assumed to be document
Thus $(elm) is equivalent to $(elm, document)

On your "li"s change the id to a class so you can reference multiple divs.
Then on the script looks like this:
$('.click a').click(function() {
var item = $(this);
$(this).parent().siblings().find('.show').slideUp(400,function(){
item.parent().find('.show').slideDown(400);
});
});
See it working on your fiddle (sorry for updating without forking)

Show/Hide a div on click

i'm writing a small script to show/hide a div when other div is clicked, but I can't get the second div clickable.
Here's my code so far:
$(document).ready(function(){
$('div#ordontia').click(function(){
$(this).next('div#ordontia2').slideToggle("slow");
});
});
http://jsfiddle.net/65AK2/1/
Every time a "button" is clicked a new div with a description should appear on the bottom of the table. (the blue div on the bottom). If another button is clicked then the previous description should close and another one should open in the same place. (not implement yet)
Thanks in advance for any help!

Why do you want to select your element with next if it has an unique ID?
$(document).ready(function(){
$('div#ordontia').click(function(){
$('div#ordontia2').slideToggle("slow");
});
});
more general if you add more divs:
$(document).ready(function(){
$('.botaomedicina').click(function(){
$('#'+$(this).attr('id')+'2').slideToggle("slow");
});
});
with all others closing:
$(document).ready(function(){
$('.botaomedicina').click(function(){
$('.botaomedicinadescription').slideUp("slow");
$('#'+$(this).attr('id')+'2').slideToggle("slow");
});
});

Don't use $.next, it only selects siblings of the current element:
Get the immediately following sibling of each element in the set of
matched elements. If a selector is provided, it retrieves the next
sibling only if it matches that selector.
— jQuery documentation: .next()
Use the normal one:
$('div#ordontia2').slideToggle("slow");

Fixed it.
http://jsfiddle.net/65AK2/2/
firstly, it lookx like your toggled div was mal-formed. I didnt see a for it.
Secondly, if you know what the ID of the other div is, you dont need to say:
$(this).next("#item");
, it would make no sense.

$(document).ready(function(){
$('div#ordontia').click(function(){
$('div#ordontia2').slideToggle("slow");
});
});
remove this ;)

try this
$(document).ready(function(){
$('div#ordontia').click(function(){
$('div#ordontia2').slideToggle("slow");
});
});
updated fiddle http://jsfiddle.net/65AK2/4/

You can do it directly by an ID selector
http://jsfiddle.net/65AK2/3/
$(document).ready(function(){
$('#ordontia').click(function(){
$('#ordontia2').slideToggle("slow");
});
});

jQuery toggle only working for the top element in the <ul>

I'm trying to implement the jQuery toggle item in my Rails 3.2.1 app.
I would like the toggle to work for each individual <li> item on the <ul>, so I can target which element to hide/show individually. But for some reason, only the top element has the toggle effect; the rest are not responding.
Here's the jsFiddle.
Can anyone explain why this is happening?

It’s because your divs all have the same id, which is invalid HTML. Since the DOM is only expecting there to be one element with any given ID, then when you write $("#trigger"), it only selects the first one it finds. Change the ID to a class.
<div class="trigger"> ...
And change your ID selector to a class selector.
$('.trigger').click(/* ... */);
jsFiddle

ID attributes must be unique on the page. Change all the id="trigger" to class="trigger" then try:
$(".trigger").click(function (){
$(this).find('.menu-item').toggle();
});

JSFIDDLE
$(".trigger").click('.menu-item', function () {
$(".menu-item", this).toggle();
});

Multiple elements with the same id is invalid HTML, and jQuery will only target the first that it finds with that id.
I updated your fiddle to use a class instead of ids
<div id="trigger" class="trigger">
Then:
$(".trigger").click(function (){
$(".menu-item", this).toggle();
});
to target the class and not the id.

Why do the elements have the same ids? An ID should be unique. If you want to select all the <li>s, use a CSS selector like $(".toggle-li").

find which li was clicked

suppose i have 3 li. what i want to do is when i click any li then i want to know which li was clicked and add an event according to it. how do i do it with jquery, any help or suggestions please

In jQuery, within an event handler the this keyword refers to the element which triggered the event.
$('li').click(function() {
alert($(this).text()); // read out the text of the list item that was clicked
}

jQuery will automatically capture the clicked element that you specify in the wrapped set:
$('ul li').click(function(){
alert('I was clicked, my text is: ' + $(this).text());
});
See the example here.
You need to provide your html markup for exact what you need.
More Readings:
jQuery's this: demystified