Develop Reference

Jquery remove element

I am basically trying to print the value of a button in the div with list class if the button is selected. Also remove the same value wwhen it is deselected. I am able to print the value successfully but not able to remove it. Could somebody please help me out with it.
var buttonSelect = $(".btn").click(function() {
if ($(this).hasClass('active')){
$(".list").append(this.value + " ")
}
else {
$(".list").remove(this.value)
}
});

You should rather append the content along with html element like span:
$(".btn").click(function() {
if ($(this).hasClass('active')){
$(".list").append('<span class="newval_'+this.value+'">'+this.value + "</span>");
}else{
$(".list").find('.newval_'+this.value).remove();
}});

The parameters from .remove() is a selector, just having a value in there that contains the content of the element you want to remove will not work. For example if I had this:
<li class="list">test</li>
Doing $(".list").remove("test") will not remove it. You will probably want to use the :contains selector (since you may have the value with spaces at the end). So in the example above doing $(".list").remove(":contains('test')") will remove the element. You can do the same thing in your case:
$(".list").remove(":contains('"+this.value+"')");

If you want to remove the element itself along with everything in it, just use jQuery’s remove() method.
$(document).ready(function() {
$("button").click(function() {
$("div").remove(); //remove Div element
});
});
You can see an example here: How to Remove Elements from DOM in jQuery

change jquery selector to not select particular div id

I have a jquery selector that I would like to change so that it wont select <div id="divA"></div>.
Heres the current selector:
$('ul.toggle a').on('click', function () {
//does some work
});
I tried $('ul.toggle a [id!=divA]') but that thows errors.
What is the intended format for this selector?

You can use :not to remove elements from the set of matched elements.
$("ul.toggle a:not('#mhs-link')")

How about this-
$('ul.toggle a').not('#divA')
The .not() function simply removes elements from a previous list of elements. Because of some nifty function chaining, you can just insert that into your current definition -
$('ul.toggle a').not("#divA").on('click', function () {
//does some work
});
References
not() - Remove elements from the set of matched elements.

Easy - Select only elements of this link

How do I change only elements inside of the link that is clicked?
I thought children of this would work but no luck.
$('.sort').click(function () {
$(this).children('i').toggleClass('icon-arrow-up-12');
});

Use find (api.jquery.com/find), like this:
$(this).find('i').toggleClass('icon-arrow-up-12');

Children are the immediate nodes beneath the current one. You need descendants. You also need to set the context:
$('.sort').click(function () {
$('i', this).toggleClass('icon-arrow-up-12');
});

If I understand you well:
$('.sort').click(function () {
$(this).toggleClass('icon-arrow-up-12');
});

.children() should actually work ..
It is difficult to say without knowing the HTML... If you are trying to get to the nested elements
You can use .find()
$(this).find('.i') OR find('#i')
What is i here .. is it class element or ID ..

how to dynamically assign numbers to several ids?

This seem like long way of doing things, is it possible to dynamically assign numbers to ids?
$(function () {
$('#Button1').click(function(){
$('#RegularExpressionValidator1, #RegularExpressionValidator2, #RequiredFieldValidator1, #RequiredFieldValidator2, #RequiredFieldValidator3, #RequiredFieldValidator4, #RequiredFieldValidator5, #RequiredFieldValidator6, #RequiredFieldValidator7, #RequiredFieldValidator8, #RequiredFieldValidator9').css("display", "block");
});
});
These are .NET generated ids which I don't have access to.

You can use an "attribute starts with" selector:
$("[id^='RegularExpressionValidator']").css("display", "block");
From the jQuery docs:
This selector can be useful for identifying elements in pages produced
by server-side frameworks that produce HTML with systematic element
IDs. However it will be slower than using a class selector so leverage
classes, if you can, to group like elements.

Have a look at the attributes starts with selector. Using it, you can simply do this:
$(function () {
$('#Button1').click(function(){
$('[id^="RegularExpressionValidator"], [id^="RequiredFieldValidator"]').css("display", "block");
});
});
This will select all elements with an ID starting with RegularExpressionValidator. You may want to specify the element type, as well as a container to look in to select fewer elements.
You may also want to use $.show() instead of $.css():
$('[id^="RegularExpressionValidator"], [id^="RequiredFieldValidator"]').show();

try
$(function () {
$('#Button1').click(function(){
$('[id^="RegularExpressionValidator"], [id^="RequiredFieldValidator"]').css("display", "block");
});
});

jQuery colon selectors

In jQuery there are a few colon selectors like
:prev, :next, :last
My question is:
Are they truly part of jQuery, because they are actually used on DOM elements?
We seem to have equivalent methods as well in jQuery prev(), next(), last(). What is the purpose of having 2 different ways?
Any basic examples would be really great.

jQuery does not have :prev or :next selectors, I have no idea where you came across them. There is a :last selector, though, as well as :first, provided by the Sizzle selector library, used by jQuery. It is a non-standard selector, not part of CSS, and is thus implemented in JavaScript.
One purpose of the :last selector over the .last() method is so you can use it to filter elements in the middle of a selector sequence, like this (note that :last and :last-child are not the same):
$('.a > .b:last > .c')
Rather than having to write a chain of methods like this:
$('.a').children('.b').last().children('.c');
By the way, the "colon selectors" you refer to are called pseudo-classes (colloquially but incorrectly known as "pseudo-selectors").

Here is how I made a slider with all sorts of selectors and traversing of objects.
$('#next').click(function () {
if (!$('*').is(':animated')) {
if ($('div.display:visible').is(':nth-child(3)')) {
$('div.display:visible').fadeOut();
$('div.display:first').fadeIn(function () {
$(this).children().fadeIn();
});
} else {
$('div.display:visible').fadeOut().next().fadeIn(function () {
$(this).children().fadeIn();
});
}
}
});
$('#prev').click(function () {
if (!$('*').is(':animated')) {
if ($('div.display:visible').is(':nth-child(1)')) {
$('div.display:visible').fadeOut();
$('div.display:last').fadeIn(function () {
$(this).children().fadeIn();
});
} else {
$('div.display:visible').fadeOut().prev().fadeIn(function () {
$(this).children().fadeIn();
});
}
}
});

yes, they are in the documentation
sometimes you can't always include everything in the selector or want a subdivision of the selector.
e.g.
$(".mylist").each(function(){
$(this).css("color","red");
$(this).next().show();
})

The colon represents a filter like to get the selected option in a dropdown I would use $("select option:selected") or to get a checked radio box I would use $("input[type=radio]:checked");
There are no :prev and :next filters, but you can find a full list of filters here http://api.jquery.com/category/selectors/