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. :)

how to remove the height of div when item removed from it

I'm showing a list of items in a div. When any of the item is clicked, it will append to the div above. I didn't set any height for this div.Item here will appear with a delete icon beside each item. Once deleted, that particular item will append to the div below which it originated from. Problem now, as items added to the above div, it's height grows and once items deleted, I expect the height would reduce too, but it remains the same. Thus when I add one more item into the above div,it grows even longer. How do I remove the height of the first div?
Pictured below describe the flow:last picture shows what happens after all items deleted from first red box and new item added into it.
Here's my code for what happens when the delete button clicked.
function hide_rate(param)
{
//remove item
$("#wrapper_"+param).text(" ");
$("input[name=rate_"+param+"]").val(" ");
$("input[name=rate_"+param+"]").empty();
$(".cross_"+param).text(" ");
$("#moveItem").css("background-color","#ff0000");
//add back removed item
$("#displaySubItems").append($(".sub_"+param+" span").text()+"<br/>");
}

Using function empty() :retains the element in DOM for eg:
<div class="hello">Hello</div>
<div class="goodbye">Goodbye</div>
$("div.hello").empty();
will only delete the text Hello from the div thereby retaining the div and thus the SPACE
ie. it wil result in
<div class="hello"></div>
<div class="goodbye">Goodbye</div>
However,using remove() will remove the element from the DOM and hence the space retained due to the use of empty() wil be eliminated.
So, use
$("div.hello").remove(); to get desired output ie.
<div class="goodbye">Goodbye</div>

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.

Select text in the last div of class

I have some contenteditable divs with the same class, the div is dynamically created so I don't know how many there are.
<div class="scale1" onclick="document.execCommand('selectAll',false,null)" contenteditable>0</div>
<div class="scale1" onclick="document.execCommand('selectAll',false,null)" contenteditable>0</div>
<div class="scale1" onclick="document.execCommand('selectAll',false,null)" contenteditable>0</div>
I want the text in the last one to be selected (like if you hold the left mouse button down over the text) with a button
The obvious way in jquery:
$(".scale1:last").click();
Doesn't work, it selects the hole page.
I also thought about ways in javascript like Selection.selectAllChildren and Selection.addRange() but i have no elegant way of knowing the last div

How to make text selection checkout here
To reach your goal - replace ID selection with following code:
var query = document.querySelectorAll(".scale1"),
text = query[query.length-1];

Try:
$('.scale1:last').text()
or
$('.scale1').last().text()
Either would work, even for dynamically added elements.
DEMO

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>