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.

Define new :first-child after current one was removed / moved

I have a function that removes list element from one ordered list then finds all ordered lists after current one, gets their first element and appends it to that lists previous one.
The issue: if I remove first element from any list or it is appended function stops working, I believe it is due jQuery remembering what first element was and as it is no longer in its place it can't find it, however it should just re-define / look up new element in particular list that is first child at the moment. Here is the function:
function removeQueueItem(element) {
//Get ordered list of removed list element
var itemMonth = element.parents().eq(2); //li.queue-month
//Get all following lists
nextMonths = itemMonth.nextAll('.queue-month');
//Fade out removed element
element.parent().fadeOut(function(index){
//Remove element from DOM
element.remove();
nextMonths.each(function(index) {
//Check if next month has socks
if($(this).find('.item-dragable').length > 0) {
var firstItem = $(this).find('.item-dragable:first-child');
$(this).prev().find('ol').append(firstItem);
}
});
});
}
JsFiddle - Remove first item in September then remove any item in August, the first item in September should become pink, but it isn't happening. This is what the problem is.

Because you are removing an a tag instead of a li tag. So when you search :first-child it is there, but you do not see it.
In order to make it work you need to change your code from:
element.parent().fadeOut(function(index){
//Remove element from DOM
element.remove(); <-- here
...
});
To:
element.parent().fadeOut(function(index){
//Remove element from DOM
$(this).remove(); <-- element to $(this)
...
});
JSFiddle

That's because it's the parent you're fading out, but the inner element you're removing. Your .item-dragable element still exists and ends up with its display property set to none. This means it's still the first child.
...becomes:
To fix this, simply change:
element.remove()
...to:
element.parent().remove()
JSFiddle demo.

How to change button class in a div while just the last one can keep the change?

I'm using this code to change my buttons's class:
$('button').on('click', function(){
var btn=$(this);
if(btn.attr('class')=='tct-button'){
btn.removeClass('tct-button').addClass('tct-button2');
}
else{
btn.removeClass('tct-button2').addClass('tct-button');
}
});
The problem is that I have multiple div's with multiple buttons in each. I need to change this so that every time I click on a button in a div the others which were changed by a previous click (in that same div) change back to the default class which is 'tct-button', and just the last clicked button turns to 'tct-button2'. Would you please help me.

use toggleClass in jquery ,there is no need to check hasClass()
$(this).toggleClass("tct-button2 tct-button");
DEMO

Use hasClass()
Determine whether any of the matched elements are assigned the given class.
Code
$('button').on('click', function(){
var btn=$(this);
if(btn.hasClass('tct-button')){
btn.removeClass('tct-button').addClass('tct-button2');
}
else{
btn.removeClass('tct-button2').addClass('tct-button');
}
});
However I think you need
$('button').on('click', function(){
$('.tct-button2').removeClass('tct-button2'); //Remove all class
$(this).addClass('tct-button2'); //Add the class to current element
});

If you want to add an additional class to your buttons (tct-button2) whilst keeping tct-button on every button you could do what Satpal suggested.
However, from the sounds of it and I may be wrong, if you want to change the classes so that each button only has one class at a time on it (either tct-button or tct-button2) you can do similar to what Satpal suggested and use:
$('button').on('click', function(){
$('.tct-button2').addClass('tct-button').removeClass('tct-button2'); //Add original class and Remove tct-button2 class
$(this).removeClass('tct-button').addClass('tct-button2'); //Add the class to current element
});
Here is the example http://jsfiddle.net/lee_gladding/xao46uzs/
to only affect buttons in the div the clicked one belongs to, use a similar method to:
$('button').on('click', function(){
$(this).parent('div').find('.tct-button2').addClass('tct-button').removeClass('tct-button2'); //Remove all class in that div
$(this).removeClass('tct-button').addClass('tct-button2'); //Add the class to current element
});
(You might want to use a better selector for the parent, possibly a class or what ever your actual html uses)
Example:
http://jsfiddle.net/lee_gladding/xao46uzs/3/

JavaScript lastChild issue

When I add text in my text field before and after the existing paragraphs the remove button functions perfectly. However, if I click the remove button before adding elements you have to click TWICE to remove the paragraphs that were not created by a function.
What could be wrong here? I watch the DOM in Firebug as I'm adding and removing, and before the new elements are added, my remove button does not target "firstDiv" on the first click, but does so on the second click.
Here is the problem function:
function removeIt() {
firstDiv.removeChild(firstDiv.lastChild);
}
Here is the fiddle: http://jsfiddle.net/nxpeD/2/
Thanks for the help!

That's because you have text nodes (spaces) at the end, so the last paragraph isn't the last child (it is the last element child).
Then, use
function removeIt() {
firstDiv.removeChild(firstDiv.lastElementChild);
}
Demo: http://jsfiddle.net/nxpeD/6/
Compatibility: To make it work on old browsers, you could also use
function removeIt() {
if (firstDiv.lastElementChild) {
firstDiv.removeChild(firstDiv.lastElementChild);
} else {
var last;
while((last = firstDiv.lastChild).nodeType !== 1) {
firstDiv.removeChild(last);
}
firstDiv.removeChild(last);
}
}
References
lastChild
lastElementChild

Use:
firstDiv.removeChild(firstDiv.lastElementChild);
Since there are formatting new line chars in your html, that will be considered as a child as well of the div. So you need to use lastElementChild to get the element and ignore the formatting and and other text nodes outside.
Demo
The last_child returned is a node. If its parent is an element, then the child is generally an Element node, a Text node, or a Comment node. Returns null if there are no child elements.
lastElementChild

Creating a "selected item" javascript code for navigation menu?

I have a navigation menu with about 10 items, and I put together this code to update the links for which is selected and which is not. It manually updates classes. The problem is, as you can probably tell, its inefficient and its a pain to update. Is there a better way of doing it?
$('#Button1').click(function(){
$('#Button1').addClass("selectedItem");
$('#Button2').removeClass("selectedItem");
$('#Button3').removeClass("selectedItem");
$('#Button4').removeClass("selectedItem");
$('#Button5').removeClass("selectedItem");
$('#Button6').removeClass("selectedItem");
$('#Button7').removeClass("selectedItem");
$('#Button8').removeClass("selectedItem");
$('#Button9').removeClass("selectedItem");
$('#Button10').removeClass("selectedItem");
});

You could try something like this -
$("[id^='Button']").removeClass("selectedItem");
$('#Button1').addClass("selectedItem");
This will first remove all the selectedItem classes from any element which has an id attribute starting with "button". The second command then adds the class to Button1
You could also simply bind all the elements with the same handler like this -
var $buttons = $("[id^='Button']");
$buttons.on('click', function ()
{
$buttons.removeClass("selectedItem");
$(this).addClass("selectedItem");
});
For each element, when clicked, the class will be removed - the element that was clicked with then have the class added.
Checkout the Attribute Starts With Selector [name^="value"] selector.

I would suggest using classes because this is exactly what they are for - to denote groups of elements. While you can easily select your buttons using the method proposed by Lix (and you should use this method if you can't modify HTML), using class is a more unobtrusive:
var $buttons = $('.button').on('click', function() {
$buttons.removeClass('selectedItem');
$(this).addClass('selectedItem');
});
Meta example: http://jsfiddle.net/88JR2/

You could have a class .button and apply it to all your buttons then
$('#Button1').click(function(){
$('.button').removeClass("selectedItem");
$('#Button1').addClass("selectedItem");
});