Develop Reference

How to remove element using jquery

I have div which contains:
<div id="div1">
<span class="input-group-addon">Span1</span>
<span class="input-group-addon">Span2</span>
<span class="input-group-addon">Span3</span>
<span class="input-group-addon npsButton"><a target='_blank' href='nps.html'>Link</a></span>
</div>
I tried to remove the last span .npsButton by using: $("#div1").remove("span.npsButton"); but it's not working. When I check by the console $("#div1span.npsButton"), it returned []. Can anyone show me how can I remove this span

Use descendant selector
$('#div1 .npsButton').remove()
// ^ Note the space here
$("#div1span.npsButton") will select the element having ID as div1span and class npsButton. As there is no element that satisfies this selector, it'll return empty array.
To remove all elements in DOM having that class,
$('.npsButton').remove();

Use
$("span.npsButton").remove();

Beside selecting using class or id there are few other ways you can select the last child
:last-child Selector
.last()
:nth-last-child()
In the following snippet I am using :last-child which will select all element that is last child of the parent
$( "div#div1 span:last-child" ).remove()
Working example

Try like this
$( "#div1 span" ).last().hide();

How to select next div?

I have this part many times in a page:
<a class="showComment" style="cursor: pointer;"><i class="icon-comment"></i> Views</a>
<br />
<br />
<div class="writeComment" style="height: auto; width: 700px;" dir="ltr" hidden="hidden">
</div>
I am now writing code in a js file for a.showComment click event.Now I want to select next div.writeComment.How to select it?

In the variable nextDiv you can do whatever you want
Using .nextAll() method allows us to search through the successors of these elements in the DOM tree and construct a new jQuery object from the matching elements.
using .next() instead you search after the DOM element that you have clicked
try this:
$('.showComment').click(function(){
var nextDiv = $(this).nextAll("div.writeComment");
});
Or
$('.showComment').click(function(){
var nextDiv = $('.showComment').next().find('.writeComment')
});
Or
$('.showComment').click(function(){
var nextDiv = $(this).next("div.writeComment");
});

next() didnt work.
nextAll() was for all of .writeComment elements that were after my .showComment element.But I found the issue.The following code made it.
$('.showComment').click(function(){
$(this).nextAll(".writeComment").first();
});

This might show you to the right way using next() http://api.jquery.com/next/
The selector will be as following:
so:
$('.showComment').next('.writeComment')
or:
$('.showComment').next().find('.writeComment')

I assume you use jQuery. Otherwise, I strongly encourage you to do so.
It has a next-statement:
$('#foo').next().css('background-color', 'red');
sets the element after foo th background:red.

Use the ~ selector. JQuery Reference
$('a.showComment ~ div.writeComment')

Remove wrapping <a> anchor tag from an image using jQuery

I am trying to remove the first wrapping tag of an image IF one exists
<div class="feature">
<a>
<img width="252" height="79" alt="" src="http://localhost:81/site/wp-
content/uploads/2011/12/home-highlights.jpg" title="home-highlights"
class="alignnone size-full wp-image-55">
</a>
</div>
I've had a look at a number of options and I assume my approach is correct here:
$(".feature img").closest('a').remove();
If I use the example above,it removes the image too which is not what I want of course.

jQuery has a built-in function for it: unwrap:
$(".feature a > img").unwrap();
unwrap docs:
Remove the parents of the set of matched elements from the DOM, leaving the matched elements in their place.
child(>) selector docs:
Description: Selects all direct child elements specified by "child" of elements specified by "parent".
Thanks #am not i am!
JSFiddle DEMO

The unwrap method is the one you want:
$(".feature a").children('img').unwrap();

You're correct, it will remove the element and any children elements. Try this though, save the image as a variable and replace the html of the div:
var myImg = $('.feature img');
$('.feature').html(myImg);

How to select an element by ID using jQuery

I am trying to use the following jQuery code to add a div with class col_box inside the col_left div:
$('#col_left').add('div').addClass('col_box');
My DOM tree looks like this:
<div id="header">Header</div>
<div class="col_container">
<div id="col_left">
<div class="col_box">A</div>
<div class="col_box">B</div>
</div>
</div>
However the jQuery code isn't working. It adds the class col_box to every element on the page.

$('#col_left').add('div') is adding all <div> elements to the original selection. Try using $('#col_left').append('<div class="col_box"></div>') instead (or .prepend).

$('#col_left').add('div') means the same as $('#col_left, div'). i.e. "The element with the id 'col_left' and all div elements.
If you want to select the divs that are children of col_left, just use a child combinator.
$('#col_left > div').addClass('col_box')

.add() adds a selector to the selection, it doesn't create or add elements.
$('#col_left') means *select element id col_left*
.add('div') means add all divs of the page the the selection
So at this point you've selected #col_left and all the divs.
.addClass('col_box') means *add the class col_box to all elements of the selection*.
Here is how to create a div and add it to #col_left:
$('<div></div>').addClass('col_box').appendTo('#col_left');
Or:
$('<div class="col_box"></div>').appendTo('#col_left');

you can use
.append appends after the matched target
$('#col_left').append(
$("<div/>",{class:'col_box'}).html("div added")
);
here is the fiddle http://jsfiddle.net/R65cn/4/

Jquery find all except

I have following HTML:
<div id="123" class="test">
<div class="testMessage">Foo</div>
<div><div class="testDate">2010</div></div>
<div id="127" class="test">
<div class="testMessage">Bar</div>
<div><div class="testDate">2011</div></div>
</div>
</div>
And I have following JS/jQuery code:
$(".test").find(".testDate").val("cool 2010");
How to change JS/jQuery to find "testDate" class element except in children "test" class block without using children?
P.S. I know only about class name and I don't know how many divs can be nested.

Update
Its probably the weirdest selector I've ever written:
$("div.test").not(':has(> .test)').siblings().find('.testDate').text('cool 2010');
Demo: http://jsfiddle.net/mrchief/6cbdu/3/
Explanation:
$("div.test") // finds both the test divs
.not(':has(> .test)') // finds the inner test div
.siblings() // get all other divs except the inner test div

Try this and also div elements do not have a value property, use html() method to set the inner html or text()
$("div.test :not(.test)").find(".testDate").html("cool 2010");
If you can modify your main div id to "_123", you can straight away use the id selector like this
$("#_123 > div.testDate").html("cool 2010");

I think the not() selector might help. You can learn more about it here: http://jsperf.com/jquery-css3-not-vs-not

Anytime you try to select $('.test'), it will grab all elements with a class='test'. You need to start at the outermost body tag:
$('body').children('.test').children(':not(.test)').find('.testDate').text('cool 2010');