We Keep Coding

Delete only the particular Div Id

<div id="#("Bottomgrid)" class="dgd2"></div>
var element = document.getElementById("#Bottomgrid");
element.empty();
$('.dgd2').empty()
Instead of deleting only Bottom grid its also removing other Div present in the screen.

jQuery .remove() will remove the set of matched elements from the DOM.
While jQuery .empty() will remove all child nodes of the set of matched elements from the DOM.
Considering if you have your HTML as below :
<div id="Bottomgrid" class="dgd2"></div>
and you want to remove div with id="Bottomgrid"
Then your javascript code will be :
$("#Bottomgrid").remove();
//This is not required as far as I see
//$('.dgd2').empty()

If you have a HTML structure like this:
<div class="holder">
<div id="item1">Hey</div>
</div>
you can simply just use this pure JavaScript code to remove the "item1" element:
var element = document.getElementById("item1");
element.parentNode.removeChild(element);

.empty() doesn't remove element it only removes elements children. use $('#Bottomgrid').remove()

Javascript :
document.getElementById("Bottomgrid").remove();
Jquery:
$( "#Bottomgrid" ).remove();

you should give the div name properly like Below how I am writing the Id. also you need to check properly which div you are going to delete. Because if a nested div present in your page and you are going to delete the div which is having all the child div inside that , then all respective div going to be deleted .
Html
<div id="bottomgridDiv" class="dgd2">
<div id="parentDiv" class="dgd2">
<div id="childDiv" class="dgd2">
</div>
</div>
</div>
Javascript
var element = document.getElementById("#bottomgridDiv");
In JQuery:-
$("#bottomgridDiv").remove();
So now if you wants to delete the bottomgridDiv then what ever the div present inside this is going to delete.

jquery how to select the next element after the current element

<div id="main">
<ul>
<li><div></div></li>
</ul>
<div>needs to be selected</div>
<div></div>
</div>
How can I select, using jquery, only the first div inside the main div?
Or
How can I select, using jquery, only the first div after <ul>?
I tried doing this but didn't work:
$('#main ul').next('div:first').addClass('my_class');

Try with a child selector:
$('#main > div').addClass('my_class');
If you have more than one direct child div and want the first one, you can do:
$('#main > div').first().addClass('my_class');
The easiest way would be to add a class to the div you are interested in so that you can easily identify it:
<div class="to-be-selected">needs to be selected</div>
then
$('#main > div.to-be-selected').addClass('my_class');
or even
$('#main .to-be-selected').addClass('my_class');
etc.

You can do simply like that.
$("#main").find("ul").next().addClass("my_class");
Hope it will be work for you.

Standard CSS selectors will do, no need for jQuery extravaganza:
First div inside #main, using :first-of-type:
jQuery('#main > div:first-of-type').addClass('my_class').
First div after ul, using the adjacent sibling selector.
jQuery('#main > ul + div').addClass('my_class');

How do I append any particular tag?

For example I have a list title like this: <li id="example"> title </li>. And here is where I want it to be "appended to" on a click of a button: <ol id="playlist"> </ol>
Here is the button: <span onClick="Button();"> Button </span>
Here is the function:
Button=function() {
$('#playlist').append('#example');
}
I just don't see why it doesn't work I mean when I make the .append('title') - so just plain text - it will add that text to the tag but when I try to append a whole tag through the ID it doesn't? It instead appends "#example" which isn't what I want. I'm sorry I am still trying to grasp this language however, I have honestly searched and scouted the whole internet to try find an anwser to this.

Try this:
$('#playlist').append($('#example'));
Fiddle
Update:
You can use the clone() method, try this:
$('#example').clone().attr('id', 'something').appendTo($('#playlist'))
Fiddle

You need to append the whole li, so your solution would be:
function Button() {
var $li = '<li id="example"> title </li>';
$('$playlist').append($li);
}

.append( content [, content] )
content: DOM element, HTML string, or jQuery object to insert at the
end of each element in the set of matched elements. ...
jQuery is assuming that you are appending the HTML string #example literally. Use one of the the other two options e.g.:
$('#playlist').append($('#example')); // append a jQuery object
For the sake of completeness:
$('#playlist').append(document.getElementById('example')); // append a DOM element

Replacing the content of a div with the content of another hidden div in Jquery

i am trying to replace the content of a div with the content of another div(which is hidden). The code works for the first time only but the second time doesn't work at all.
I have a div where the titles of some articles are scrolling. I want to achieve that:everytime i am going to click the title of an article its content(the content is in hidden div) is going to appear in another div with the id="sreen".
<script type="text/javascript">
//everytime you click the title of an article
$("a.title").live("click", function(){
//replace the content of div screen with the content of an article
$('div#screen').replaceWith($(this).next('div.content'));
});
</script>
Any ideas???

Using .replaceWith will effectively remove div#screen. So using .html() will be what you want to do to maintain the element div#screen.
You mentioned that your formating is not working correctly which leads me to believe you have css classes on div.content. Calling .html() on div.content will ommit the root node of div.content.
<div class="content">
<span>some text</span>
</div>
$("div.content").html() will produce <span>some text</span>
If my assumptions are correct you might want to look at using clone() which will clone the current object without events or clone(true) to include any data and events.
var $content = $(this).next('div.content').clone();
$content.css("display", "block");
$('div#screen').html($content);
Another way of doing this would be use .outerHTML
$("a.title").live("click", function() {
$('div#screen').html($(this).next('div.content')[0].outerHTML);
});
Example on jsfiddle.

use the .htmldocs method for this
<script type="text/javascript">
//everytime you click the title of an article
$("a.title").live("click", function(){
//replace the content of div screen with the content of an article
$('div#screen').html( $(this).next('div.content').html() );
});
</script>

Append the div content jquery

Hi I have a div with content like this
<div><strong>some content
....</strong></div>
How can I add another element to the div after <strong>, how to add <span> element after <strong> ?
Thank you

Just use append on your div element:
$('#divId').append('<span>Hi</span>');
It will insert the span element inside the div, at the end of the child node list.
Edit: In response to your comment, to remove it, since you added the element with append, you can get it selecting the last-child:
$("#divId span:last-child").remove();
Or you could remove all the span elements within the div:
$("#divId span").remove();

If the <div> is the only one on the HTML page in question:
$('div strong').after('<span>Span element</span>')
See http://docs.jquery.com/Manipulation/after#content

append and after are easily found in the documentation