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 - find all inputs, except the ones descending from div

Well I'm trying to write a validation jQuery plugin, but for that I need to find all inputs inside of a container, which is marked with an attribute. However, that container may have other sub-containers, also marked with attributes, and they may have their own inputs.
I need to select all inputs, descendants of the parent container (accessed by $(this)) which are not descendants of the sub-containers. Is that possible?
Some code to illustrate:
<div data-container>
<input>
<div class="form-group">
<input>
</div>
<input>
<div data-container>
<input>
<input>
<input>
</div>
</div>
I want to select those first three inputs, and ignore the ones inside the children data-container. The one inside the form-group must be selected too.

Use .not() to exclude a selection from an existing jQuery selection:
var yourSelection = $(this).find('input').not($(this).find('[data-container] input'));
JSFiddle (I replaced the $(this) by $('[data-container]:first') in the fiddle for simplicity)

This should work, here http://jsfiddle.net/2Wv7P/
$('div[data-container] input:lt(3)')

You can select based on the parent div like this. Only the first level children are going to be selected based on you given tag, assuming you ID the parent div as #parent
$('#parent > input')
So following this path, if you have to select the parent with $(this), which is to say using 'this', then you can select this same set of 'input's using
$('#' + this.id + ' > input')
For example
see this fiddle

Move a Element in Jquery

I want to prepend a Font Element in HTML within a DIV. There will be multiple div within the same page with unique Id.
<div id="id-unknown">
"Some Text"
<font color="red">*</font>
</div>
To
<div id="id-unknown">
<font color="red">*</font>
"Some Text"
</div>
I used this Jquery code to achieve it but it gets all the fonts and prepend to every div element
$("font").prependTo($("font").parent());
http://jsfiddle.net/s4Ehw/

If you only want to do this for specific divs, just add the ID selector and use .each to obtain a reference to the specific element (this)
$('#id1, #id2, #id3').children('font').each(function() {
$(this).prependTo(this.parentNode);
});
If it so happens that every font tag needs this change, use the same .each construct as above but use $('font'), per your original code and Si Donaldson's answer.
For extra performance, replace the function body with:
var parent = this.parentNode;
parent.insertBefore(this, parent.firstChild);
i.e. replacing the jQuery calls with direct DOM manipulation.

You need to itterate through each one first using $.each and then you can work on each one individually!
http://jsfiddle.net/sidonaldson/s4Ehw/2/
$("font").each(function(){
$(this).prependTo($(this).parent());
});

use jQuery each function for manage elements in cycle
jsfiddle.net/s4Ehw/6/
$("font").each(function(){
$(this).prependTo($(this).parent());
})

$.each($("font"), function(index, element) {
console.log($(element));
$(element).prependTo($(element).parent());
});

I am getting undefined value when i try to get parent id of span

I am getting undefined value when I try to get parent id of span.
This is my code:
<span id="test">sskdfj <span>test</span> asdkfwsfe</span>
$(obj).closest().attr('id');

You have to pass a selector to closest() to get any results from it.
If you want the parent element, use parent(), not closest().
$(obj).parent().attr('id');

Assuming the following HTML:
<div id="test">
<span id="test_2"></span>
</div>
In your code obj is #test_2. You want to get #test. You should give a selector to the closest method to select an element, otherwise jQuery doesn't know what to select.
$("#test_2").closest("#test").attr('ID')
Or, as Quentin stated, use parent instead if that's the element you want to select.
$("#test_2").parent().attr('ID')
Check it out here: FIDDLE

Since you're using jQuery, separate out your JS code and use a class.
<span id="spn8">
<span class="clickable">[This note is for an FMLA condition]</span>
</span>
function changeText1(obj,event) {
var pid = $(this).parent().attr('id');
alert(pid);
}
$('.clickable').click(changeText1); // 'spn8'

Why is this small javascript not working?

I have multiple instances of a div with an id of "myDiv" on a page. I want to replace the contents of these divs. When I use this javascript:
function replaceContent(id, content) {
var container = document.getElementById(id);
container.innerHTML = content;
}
replaceContent('myDiv', 'hello there');
<div id="myDiv"></div>
<div id="myDiv"></div>
<div id="myDiv"></div>
It only replaces the content inside one of those divs and not all of them. If I use the .html() function of jquery instead, it replaces the contents of all divs. Is there any way I can get the above js to work in the same way?

id values must be unique - you can't have more than one id with the same name and update all of them.

I have multiple instances of a div with an id of "myDiv" on a page.
This is where you're doing it wrong. You cannot assign an ID to multiple elements on a page - it has to be unique.
It only replaces the content inside one of those divs and not all of them.
This happens because getElementById() returns only the first-matched element in case multiple such elements are matched.
To solve this, assign a class instead of an ID to the divs you want to target, and if you can use jQuery, use this instead (assuming class="myDiv"):
function replaceContent(className, content) {
$('div.' + className).html(content);
}
// This appends className so the selector becomes $('div.myDiv')
replaceContent('myDiv', 'hello there');

IDs have to be unique. You can use the same class name for all divs and then use a css selector.
<div id="div1" class="mydivs">blah</div>
<div id="div2" class="mydivs">blah123</div>
For e.g. In JQuery, you could do:
$('.mydivs').html("whatever");