We Keep Coding

how does childNode indexing work with javascript?

For example, if I have
<div>
<h2>Name</h2>
<h3>age</h3>
<span class='fa fa-trash'></span>
</div>
and when clicking the span (icon) I say
this.parentNode.childNodes[1].innerText
it would target the Name but if I say
this.parentNode.childNodes[2].innerText
it would not target Age. why is this? Is there a resource that explains this well? I know the indexing doesn't start at 0 but I don't understand how the indexing work.

DOM is not just the elements you see in your HTML code. In-between each element is a "text node" where text can be displayed. An example of this would be having text in a div below a a header. So...
<div>
<!-- Index 0: Text node -->
<h1>Header Text</h1> <!-- Index 1: Element -->
Description Text <!-- Index 2: Text node -->
</div>
As you can see, you are allowed to insert text in the div without wrapping it in an element. These are called text nodes which you see when you put the text in normal text elements (such as span or p) or buttons (<button>TEXT</button>). So to get around this in you JavaScript code, you could either do it the lazy way;
document.getElementById("ELEMENT_ID").childNodes[INDEX*2 + 1]
or by using the children property;
document.getElementById("ELEMENT_ID").children[INDEX]
The problem with this method is that it only returns 'element' children within the div, so the description text in the above HTML example will not be accessible. ([H1] instead of [Text, H1, Text]), but I suppose that is what you're looking for anyway. :)

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.

Replacing HTML content without using jquery

I have a HTML content like this:
some of the string content <font color=blue>Test content <BR><BR><BR>
<DIV id='idOfTheDiv'>
some more goes here
<P>Test Content</P>
</DIV>
</font>
I want to remove the div without removing it's content, so the resultant data should look like
some of the string content `<font color=blue>Test content <BR><BR><BR>`
some more goes here
<P>Test Content</P>
</font>
Please note that i do not want to remove the content of the div, also i do not want to add any unwanted HTML element just to remove the div. I have tried various techniques but none of them is working at the moment.
I tried this replacing the innerHTML but it did'nt worked. I can not use replaceChild, as
<DIV id='idOfTheDiv'>
some more goes here
<P>Test Content</P>
</DIV>
is a combonation of text plus HTML so CreateTextNode does'nt workks here as it changes all HTML to plain text.
Please suggest. Thanks a Ton..

Loop over the elements inside the div (use childNodes as it also includes text nodes, while children does not).
Place the elements one-by-one before the div using insertBefore.
Remove the div using removeChild.

This will do the trick:
var el = document.getElementById('idOfTheDiv');
while (el.childNodes.length) {
el.parentNode.insertBefore(el.childNodes[0], el);
}
el.parentNode.removeChild(el);
Demo: http://jsfiddle.net/VG5ZF/
el.parentNode.insertBefore(el.childNodes[0], el); moves the first child node outside from element, reducing the length of childNodes NodeList. So in every iteration el.childNodes[0] is going to be next one. Until there are childs.

Is Id necessary in applying jquery functions?

Suppose I have two p tags in the document. I want to call two different effects using jQuery when onMouseOver event happens. Is it necessary that these two p tags be given Ids. Can't it be achieved without giving Ids to these tags ?

You don't have to give anything an id, however it is the best way to uniquely identify an element.
You can instead idenfity by class:
$(".myClass")
By attribute:
$("[src='image.jpg']")
By position in parent:
$("p:eq(2)")
A full list of selectors is available in the documentation

$('p:first'); // first p tag
$('p:last'); // last p tag
$('p').eq(1); // exactly the second p tag

There are several ways to select an element / elements:
$('.classname')
$('#id')
$('tagname')
$('[attr="value"]')
etc

although jQuery allows you to write faster and easier scripts, but unfortunately it makes you never understand the real JavaScript.
$("*") //selects all elements.
$(":animated") //selects all elements that are currently animated.
$(":button") //selects all button elements and input elements with type="button".
$(":odd") //selects even elements.
$(":odd") //selects odd elements.$("p") selects all <p> elements.
$("p.intro") //selects all <p> elements with class="intro".
$("p#intro") //selects the first <p> elements with id="intro".
$(this) //Current HTML element
$("p#intro:first") //The first <p> element with id="intro"
$("p:eq(2)") // The third <p> element in the DOM
$(".intro") //All elements with class="intro"
$("#intro") //The first element with id="intro"
$("ul li:first") //The first <li> element of the first <ul>
$("ul li:first-child") //The first <li> element of every <ul>
$("[href]") //All elements with an href attribute
$("[href$='.jpg']") //All elements with an href attribute that ends with ".jpg"
$("[href='#']") //All elements with an href value equal to "#"
$("[href!='#']") //All elements with an href value NOT equal to "#"
$("div#intro .head") //All elements with class="head" inside a <div> element with id="intro"
jQuery – Select element cheat sheet

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