Develop Reference

jQuery check divs has a class and unwrap if no other class

I have two div's and what I am trying to do is loop through all the divs to check if the div has a class jsn-bootstrap3, I'm also trying to check to see if the div has any other classes, if it doesn't then I'd like to remove the jsn-bootstrap3 div so that the child content is whats left.
<div class="jsn-bootstrap3">
<div class="wrapper">
Div one
</div>
</div>
<div class="jsn-bootstrap3 block">
<div class="wrapper">
Div two
</div>
</div>
$('div').each(function() {
if ($(this).hasClass()) {
console.log($(this));
var class_name = $(this).attr('jsn-bootstrap3');
console.log(class_name);
}
});
jsFiddle

You can try something like
$('div.jsn-bootstrap3').removeClass('jsn-bootstrap3').filter(function () {
return $.trim(this.className.replace('jsn-bootstrap3', '')) == ''
}).contents().unwrap();
Demo: Fiddle
use the class selector to find div's with class jsn-bootstrap3 because we are not goint to do anything with others
use filter() to filter out div's with any other class
use unwrap() with contents() to remove the wrapping div

jQuery: unwrap() deletes additional parent container

I have the container .vorteile wrapped in .vorteile_outer by jQuery. When I want to remove .vorteile_outer using .unwrap() on .vorteile, the parent container of .vorteile_outer which is #template_footer_vorteile also gets removed.
Here is the jquery part (in full context it is in a function).
$('.vorteil, :vorteil_outer:not').unwrap();
And here the HTML part
<div id="template_footer_vorteile">
<div class="vorteil_outer">
<div class="vorteil kunden">
<p class="titel">kundenzufriedenheit</p>
<p class="desc">kundenzufriedenheitText</p>
</div>
</div>
<div class="vorteil_outer">
<div class="vorteil tradition">
<p class="titel">tradition</p>
<p class="desc">traditionText</p>
</div>
<div class="clear"></div>
</div>

Just give like this
$("p").unwrap(); // vorteil class div removed
$('.vorteil').unwrap(); // vorteil_outer div removed
DEMO

If you want to remove 'template_footer_vorteile' then try this :
$('.vorteil').parent().unwrap();
and if you want to remove only "vorteil_outer" and retain the "template_footer_vorteile" then try this :
$('.vorteil').unwrap();

To remove the .vorteile_outer you always have to apply unwrap to vorteil (ie) when you want to remove the div apply unwrap to the child of that div.
var gs = $("div.vorteil");
$("button").click(function () {
if (gs.parent().is("div.vorteil_outer")) {
gs.unwrap();
}
});
here is fiddle
To know about unwrap visit http://api.jquery.com/unwrap/

JQuery : Remove class, not child content

I use jQuery to append the content into each contentx class like.
<div id="sidebar">
<div class="contentx"></div>
<div class="contentx"></div>
</div>
<script>
$("#sidebar .contentx").each(function()
{
//Append here
}
</script>
After Append I have, for example :
<div id="sidebar">
<div class="contentx">
something 1 is inserted here.
</div>
<div class="contentx">
something 2 is inserted here.
</div>
</div>
but I want to remove class="contentx" whenever the content is appended. This mean I have only :
<div id="sidebar">
something 1 is inserted here.
something 2 is inserted here.
</div>
How

Option 1
If you just want to remove the class "contentX" from the div after the content has been added, you can try the following:
$('#sidebar .contextX').each(function () {
// Append here.
}).removeClass('contextX');
EDIT: Seems I misread the question a little (based on your indicated desired output).
Option 2
If you want to remove the entire element and replace it with the content of your choice? For that, you can try:
$('#sidebar .contextX').each(function () {
$(this).replaceWith('<new content here.>');
});
jQuery replaceWith

Besides the append, call removeClass
$("#sidebar .contentx").each(function()
{
//Append here
$(this).removeClass('contentx');
}

Try this
var tmp = $(".contentx").html();
$('.contentx').append(tmp);
var tmp2 = $(".contentx").html();
$('.contentx').remove();
$('#sidebar').append(tmp2);

Traversing DOM from span in / out of divs

I'm adding a click event to a span that is within a div. The target of this event, which will become visible, is a first div that is within a div, two divs down. How can I traverse the DOM to find it?
Perhaps it'll be clearer with the code:
<div a>
<h2>
<span id="here">Click</span>
</h2>
</div>
<div></div>
<div>
<div class="targetDiv">This is the div we need to find</div>
<div class="targetDiv">There are other divs with the same id, but we don't need to find those</div>
<div class="targetDiv">Not looking for this one </div>
<div class="targetDiv">Or this one either</div>
</div>
I've searched left and right and cannot find an answer. It's important to restrict the event ONLY to the first div immediately after the span.
Any help would be much appreciated.

As shown, the code would look like this:
$('span#here').on('click', function() {
$(this).closest('div').siblings(':contains(.targetDiv)').children().eq(0).show();
}

Here's a sample of the fish we caught
$(function() {
$('#here').on('click', function() {
var div = $(this) //the element clicked
.closest('div') //find nearest parent div
.nextAll(':eq(1)') //find the second next div
.children(':eq(0)') //find the first child of it
.show(); //remove invisible cloak
});
});​

This works. I provided an example you can just save to a html file and test it yourself
<style>
.targetDiv{display:none;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#here').click(function(){
$('.targetDiv').first().show(); // or whatever you want
});
});
</script>
<div a>
<h2>
<span id="here">Click</span>
</h2>
</div>
<div></div>
<div>
<div class="targetDiv">This is the div we need to find</div>
<div class="targetDiv">There are other divs with the same id, but we don't need to find those</div>
<div class="targetDiv">Not looking for this one </div>
<div class="targetDiv">Or this one either</div>
</div>

nearest ancestor node in jQuery

In my javascript experience, I found that is a very common task "searching the nearest ancestor of an element with some condition (tag name, class,...)".
Can the parents() method of jquery do the job? The order of returned elements of parents() is predictable? Is top-to-bottom or bottom-to-top?
For the moment I use this utility function:
function ancestor(elem, selector) {
var $elem = $( elem ).parent();
while( $elem.size() > 0 ) {
if( $elem.is( selector ) )
return $elem;
else
$elem = $elem.parent();
}
return null;
}
Can someone tell me if there is a clever way to do the job?

Edit: Since jQuery 1.3, this has been built in as the closest() function. eg: $('#foo').closest('.bar');
yep - parents() traverses up the tree.
<div id="a">
<div id="b">
<p id="c">
<a id="d"></a>
</p>
</div>
</div>
$('#d').parents("div:first"); will select div b.

Adding to #nickf's answer:
jQuery 1.3 simplifyed this task with closest.
Given a DOM:
<div id="a">
<div id="b">
<p id="c">
<a id="d"></a>
</p>
</div>
</div>
You can do:
$('#d').closest("div"); // returns [ div#b ]
[Closest returns a] set of
elements containing the closest parent
element that matches the specified
selector, the starting element
included.

You should use closest, because parents won't give you the result you expect if you're working with multiple elements. For instance, let's say you have this:
<div id="0">
<div id="1">test with <b>nested</b> divs.</div>
<div id="2">another div.</div>
<div id="3">yet <b>another</b> div.</div>
</div>
and you want to add a class to the divs that have a <b> element as their immediate child (ie, 1 and 3). If you use $('b').parents('div'), you get divs 0, 1 and 3. If you use $('b').parents('div:first'), you only get div 1. To get 1 and 3, but not 0, you have to use $('b').closest(elem).

closest() starts at current element, if the parent you are looking for has the same tag as current (eg. both are divs), use parent().closest()