Develop Reference

Remove div with class without content from multimple nested places

I have:
<div class="stuff">
<div class="removeme">
<div class="iamfree">
iamfree
<div class="removeme">
<div class="ishouldbefreetoo">
ishouldbefreetoo
</div>
</div>
</div>
</div>
</div>
I want:
<div class="stuff">
<div class="iamfree">
iamfree
<div class="ishouldbefreetoo">
ishouldbefreetoo
</div>
</div>
</div>
Tried the unwrap() function from jQuery here: http://jsfiddle.net/adyz/7d947wja/
Also, cloned elements act strange with unwrap.

You need to call the unwrap() on the contents of the elements to be removed.
$('.removeme').contents().unwrap()
Demo: Fiddle
Remove the parents of the set of matched elements from the DOM,
leaving the matched elements in their place.

Replacement for toggle() multiple div sets

I've been working on this for a while and thought I'd like to get some expert advice.
I have 4 divs on a page labelled sun-sun3. When each of the divs is clicked a corresponding div (suninfo-suninfo3) will appear and when clicked again will disappear. While one of the info divs is open the others will always be closed.
Here is the html
<div class="dot sun">
</div>
<div class="info suninfo">Some Content</div>
<div class="dot sun1">
</div>
<div class="info suninfo1">Some Content</div>
<div class="dot sun2">
</div>
<div class="info suninfo2">Some Content</div>
<div class="dot sun3">
</div>
<div class="info suninfo3">Some Content</div>
The CSS is styled so that the sun divs use pulse which works fine and the suninfo divs appear in various locations around the page. All works perfectly.
The following Javascript also works fine, however it is using toggle() which I would like to replace. My code is also quite long.
$(document).ready(function(){
$(".sun").click(function(){
$(".suninfo").toggle();
$(".suninfo1,.suninfo2,.suninfo3").hide();
});
$(".sun1").click(function(){
$(".suninfo1").toggle();
$(".suninfo,.suninfo2,.suninfo3").hide();
});
$(".sun2").click(function(){
$(".suninfo2").toggle();
$(".suninfo,.suninfo1,.suninfo3").hide();
});
$(".sun3").click(function(){
$(".suninfo3").toggle();
$(".suninfo,.suninfo1,.suninfo2").hide();
});
});
As you can see, there isn't much to it and it does work, but I'd rather not use toggle()
Cheers

I would suggest leveraging jQueryUI for this -- as it provides this functionality out of the box.
http://jqueryui.com/accordion/
In addition it will not require you to modify your script if you decide to later add divs for sun4, sun5, and/or sun6, etc.

You can use start with jquery selector in this case but need to rename 'suninfo' class name because 'sun' and 'suninfo' class names starts with 'sun' word, so it will be difficult to use start with jquery selector. Also selector class name should be first while writing in div
like if we are using $("[class^='suninfo']") then suninfo should be first call in <div class="suninfo info">.
Please see below jquery
$(document).ready(function(){
$("[class^='sun']").click(function(){
var nextElement = $(this).next();
$(nextElement).toggle();
$("[class^='infoSun']").not($(nextElement)).hide();
});
here rename your suninfo class to infoSun and call it at first place like below
<div class="dot sun">
</div>
<div class="infoSun info">Some Content</div>
<div class="dot sun1">
</div>
<div class="infoSun1 info">Some Content</div>
<div class="dot sun2">
</div>
<div class="infoSun2 info">Some Content</div>
<div class="dot sun3">
</div>
<div class="infoSun3 info">Some Content</div>
Please see this for more information on start with selector in JQuery

To make it more simple according to you structure:
$(".dot").each(function(){
$(this).click(function(){
$(this).next().toggle();
$(".info").not($(this.next())).hide();
})
})
Why don`t you like toggle?
To manually control it you can:
$(element).hide('slide',{direction:'left'},1500) //([animation, params, time])
$(element).show('slide')
if using jQuery

how to select only div within parent after click

I am trying to figure out how to select a particular element with a certain class name within it's parent div, after a click event.
<div id="news">
<div class="one">
<p>news</p>
</div>
<div class="two">
</div>
</div>
<div id="users">
<div class="one">
<p>users</p>
</div>
<div class="two">
</div>
</div>
my simple jquery is as follows:
$(".clickme").on("click", function () {
//how to select only the element with the class "one" within the parent and show it
});
My failed attempts have been trying to use the parents and closest methods and code like $(this).parents().find(".one").show();
Any help would be great!!

Working Demo
try this
$(this).parent() refers to parent div
.prev('one') to previous sibling with class .one
$(this).parent().prev(".one").show();

Try with .prev()
$(this).parent().prev(".one").show();
See the DEMO

I would traverse it like this.
$('.clickme').click(function(){
$(this).parent().siblings().eq(0).show();
});
fiddle

replaceWith(); JQuery function

I'm trying to include what should be a simple JQuery snippet into a friend's portfolio website to replace:
<div class="content one">
<h3>Content Title</h3>
<p>Body text.</p>
</div>
With:
<div class="content two">
<h3>Content Title</h3>
<p>Body text.</p>
</div>
When hovering on a separate div class of:
<div class="item two"><!--content two icon-->
<img src="" alt="" />
</div>
I have these separate classes of <div class="item"> that have icons in them. I want to be able to hover over the icon's class and replace the <div class="content"> class with another one that corresponds to the <div class="item"> icon.
For the JQ, I'm using the following:
<script type="text/javascript">
$('.item two').hover(function(){
$('.content one').replaceWith($('.content two'));
});
</script>
I have each content class (except .content one) as display: none; I think I need to throw in a .show(); event inside of the replaceWith(); function, but even if I remove display: none; on the classes, nothing replaces itself with the class I'm trying to replace.
I'm still relatively new to JQuery and JavaScript as a whole, so it's probably something stupid simple that I'm not doing right. Forgive me if I didn't include enough information to help you figure out the issue. Thanks for the help!

You have two classes on the same element in both cases, so your selectors should be:
.item.one
.item.two
.content.two
.content.two

try this:
$('.item.two').hover(function(){
$('.content.one').replaceWith($('.content.two'));
});

Need explanation of jQuery code

Can someone please explain the structure of this line of a script for me? Another user on here has written it as part of a function that I know want to edit and change to use elsewhere on my site.
$('#main_content .img-wrapper').empty().append($(this).find('img').clone());
This one takes an image from one div and copies it to another with the class="img-wrapper"
I want to do exactly the same but with text. I tried this
$('#main_content .text-wrapper').empty().append($(this).find('.info').clone());
where ('.info') is the class name of the div I want to copy. Its not working.
I don't fully understand the syntax as this is my first day using javascript. Please can someone explain where I'm going wrong?
This is the HTML - There are four different images and when the user clicks on each of the image I want it to load the same image and associated text in the main content div
<div class="row">
<div class="card-container">
<div class="card">
<div class="back">
<img src="images1.png" />
<div class="info" style="display: none;">This is a test for image one</div>
</div>
<div class="front" style="background-color:#cc99cc;"></div>
</div>
</div>
<div class="card-container">
<div class="card">
<div class="back">
<img src="images2.png" />
<div class="info" style="display: none;">This is a test for image one</div>
</div>
<div class="front" style="background-color:#9966cc;"></div>
</div>
</div>
<div class="card-container">
<div class="card">
<div class="back">
<img src="images3.png" />
<div class="info" style="display: none;">This is a test for image one</div>
</div>
<div class="front" style="background-color:#6666cc;"></div>
</div>
</div>
<div class="card-container">
<div class="card">
<div class="back">
<img src="images4.png" />
<div class="info" style="display: none;">This is a test for image one</div>
</div>
<div class="front" style="background-color:#3366cc;"></div>
</div>
</div>
This is the main content div
<div id="main_content">
<!-- main content -->
<div class="img-wrapper">
</div>
<div class="text-wrapper">
</div>
</div>

The javascript in question is using jQuery.
$('#main_content .img-wrapper')
returns the element(s) with class 'img-wrapper' inside the element with id 'main_content'
.empty()
empties this element (removes all it's HTML contents)
.append(
inserts the argument (the bit that comes next) into this element
$(this).find('img')
finds all 'img' tags within the element referred to by this (i.e. if this was triggered from a .click() handler then the element that was clicked)
.clone()
clones these elements so that there are two versions - one in their original location and one being inserted into the #main_content img-wrapper element.
);
Do you definitely have a #main_content .text-wrapper element?

Without seeing the html structure, my guess would be the context in which you're trying to find .info is incorrect.
I'm assuming this block of code is within an event handler like a click or mouseover or something. In that case the $(this) is referring to the element that triggered that event. So the following snippet:
$(this).find('.info')
is looking for elements with a classname of info within the element referred to by $(this).
Make sure the context is correct - change $(this) to the element that you need to search within.

Try this:
$('#main_content .text-wrapper').empty().append($(this).find('.info').html());