We Keep Coding

How to remove div with a particular text in it

I have some div tags which has some text & elements in it & I want to remove those div's, They are looks like this
<div style="font-family:verdana;font-size:12px;">
Example
example
</div>
There are many div's like this & I want to remove them all with using jQuery or javascript

If the elements have nothing in common such as a class, you can remove it by using the :contains and remove() method.
$("div:contains('Example')").remove()
Full example shown below:
$("div:contains('Example')").remove()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div>
Example
</div>
<div>
Darren
</div>
If the elements do have something in common you could use the class selector.
$(".common-class").remove();

Based on Darren's answer, if you want to be extra sure (as :contains will match and delete any div containing the word example), you can make sure it's a div that has an anchor with that same example as children, then go back to the parent and remove it.
If this doesn't work, please paste a few more divs so we can see a common pattern and target it the safest way possible.
$(document).ready(function(){
$('#remove').click(function(e){
$("div:contains('Example')").children("a:contains('example')").parent("div:contains('Example')").remove()
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="font-family:verdana;font-size:12px;">Example example</div>
<div style="font-family:verdana;font-size:12px;">Don't remove example</div>
<div style="font-family:verdana;font-size:12px;">Example don't remove</div>
<button id="remove">
Remove undesired divs
</button>

Get the height of an item inside last container

This should be pretty simple but I can't make it work. I need the height of an item that is inside the last item with a class.
HTML like so:
<div class="tag" >
<div class="left"></div>
<div class="right"></div>
</div>
<div class="tag">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="tag">
<div class="left" id="I need this height !"></div>
<div class="right"></div>
</div>
<div class="footer"></div>
JavaScript poor attempt:
lastLeftHeight = $('.tag').last().$('.left').height();
I know that doesn't work. It's just to show what I'm trying to get .tag items can vary so I can't target a number or an ID.

try this ..
lastLeftHeight=$('.tag:last > .left').height();

you almost had it, but instead of using jquery methods, it can be accomplished with the proper query selector
$(.tag:last .left).height()
this will grab the last .tag element and find every child element with the class .left and return their heights
heres a fiddle demonstrating the selector in action:
http://jsfiddle.net/6e0s4jzj/

I would try some combination of using children(), filter(), and last() to get the height of a particular child div.
http://www.w3schools.com/jquery/jquery_traversing_filtering.asp
This explains a little more about traversing up and down the DOM using jQuery, and with examples that I would think would help.

Wrap several div with other div

I have several div as following:
<div id='id1'>blabla</div>
<div id='id2'>blabla</div>
<div id='id3'>blabla</div>
<div id='id4'>blabla</div>
<div id='id5'>blabla</div>
<div id='id6'>blabla</div>
And I would like to add a new div (<div id='newdiv'>) in order to wrap the div I specify.
For example before 'id3' and after 'id5'.
So we obtain:
<div id='id1'>blabla</div>
<div id='id2'>blabla</div>
<div id='newdiv'>
<div id='id3'>blabla</div>
<div id='id4'>blabla</div>
<div id='id5'>blabla</div>
</div>
<div id='id6'>blabla</div>
Do you know jQuery code to do this?

Use jQuery .wrapAll() :
$('#id3, #id4, #id5').wrapAll('<div id="newdiv" />')
Fiddle : http://jsfiddle.net/K4HVR/

Probably a simple plugin to make it more flexible, reusable:
$.fn.customWrap = function (end, wrapperDivAttr) {
this.nextUntil(end).next().addBack().add(this).wrapAll($('<div/>', wrapperDivAttr));
}
$('#id3').customWrap('#id5', { id: 'newDiv'}); // call the function on the startelement, specify the end elements selector and attribute obj.
nextUntil to get all the divs until the end div, then next to select the end div as well, and addback() to add the previous elements (nextUntil ones) to the collection and then add() to select the start div as well and then wrapAll of them.
Demo

In a bit of a hurry so this is untested but something like this?
$("#id3, #id4, #id5").wrapAll('<div id="newdiv" />');
EDIT: Oh damn, looks like Karl-André beat me to it!

How do I calculate width of div based on previous child width

So let's say have the following content structure:
<div class="wrapper">
<div class="contentOne" style="width:50px"></div>
<div class="contentTwo"></div>
<div class="contentThree"></div>
<div class="contentFour"></div>
</div>
What I want to achieve on page load, is for the width of the 1st div (contentOne) to be picked up and increment the width of the other 3 divs by 50px. In the end I want the following:
<div class="wrapper">
<div class="contentOne" style="width:50px"></div>
<div class="contentTwo" style="width:100px"></div>
<div class="contentThree" style="width:150px"></div>
<div class="contentFour" style="width:200px"></div>
</div>
First prize would be for this to be possibly using CSS3 Calc. If not JS will be a close 1st princess.
Thanks

Right now, CSS has no preceding-sibling selector (although there is a "following sibling" selector, for some reason), so a pure CSS solution isn't yet possible. jQuery would be something like this:
$('div:not(:first)').each(function()
{
$(this).width($(this).prev().width() + 50);
});

Use Jquery to this . The code would be something like this. Please make the changes appropriate this is just a demo code.
var widthOfFirstChild=$('.wrapper').eq(1).width();
$('.width div').each(
function(){
$(this).attr('style':widthOfFirstChild+50);
widthOfFirstChild=+50
});

Position elements in a top->down left->right manner

I have a main container <div> which holds 4 or 5 other sub <div>s. The container has a fixed height and a fixed width. What is the best way to position the sub divs so that they are arranged in a top->down then left->right manner?
I've tried floating the sub divs but that just gives me a left->right then top->down order.
Basically I want this
[ sub div 1][sub div 3][sub div 4]
[ sub div 2][ ][sub div 5]
When I mark up the code like this:
<div id="container">
<div class="subdiv">sub div 1...</div>
<div class="subdiv">sub div 2...</div>
<div class="subdiv">sub div 3...</div>
<div class="subdiv">sub div 4...</div>
<div class="subdiv">sub div 5...</div>
</div>
Notice that the sub divs can have variable heights but fixed widths.
Thank you,

To my knowledge, there's no way to do it.
There is some CSS3 that works only on some browsers to support multi-column layout (-moz-column-width, etc...) but I don't know whether it would work with DIVs in the content. And I'm fairly certain it it's not supported in IE7
The way I'd do it would be to break up the content into 3 columns containers
<div id="container">
<div class='column'>
<div class="subdiv">sub div 1...</div>
<div class="subdiv">sub div 2...</div>
</div>
<div class='column'>
<div class="subdiv">sub div 3...</div>
<div class="subdiv">sub div 4...</div>
</div>
<div class='column'>
<div class="subdiv">sub div 5...</div>
</div>
</div>

Use this CSS on the DIVs:
display: inline-block

The only way to do this natively is to use CSS3 columns (as Damp mentioned) but there are some articles on how to achieve a similar effect with JavaScript as seen in this question. That case is actually more complicated than yours.
I'm thinking the best way to do it with JS would be to first split it evenly into column containers as Damp suggested with a best guess. This should help for those with JS disabled. Then us JS to measure heights of the subdivs and move them if the initial guess was off. Assuming you're using a server side language to generate the page, you should be able to split the columns evenly. You can probably even make a good estimation on the split by checking the length of content (assuming its text) as a heuristic for the likely height of the subdiv.