getElementsByName which name?

Question

I'm creating a bunch of divs in javascript, and at a certain time I wish to delete all the divs.

My code is like this:

function CreateDiv(width, height, row, col){
var thisTile = document.createElement("div");
thisTile.style.position = "absolute";
thisTile.style.width = width + "px";
thisTile.style.height = height + "px";
thisTile.style.top = row*TileH + topMargin + "px";
thisTile.style.left = col*TileW + leftMargin +"px";
thisTile.style.backgroundImage = "url(" + imagePath + ")";
thisTile.style.backgroundSize = imageWidth + "px " + imageHeight +"px";
thisTile.style.backgroundRepeat = "noRepeat";
thisTile.style.backgroundPosition =  "-" + col*TileW + "px -" + row*TileH + "px";
thisTile.onclick = TileClicked;
thisTile.name = "tiles";
document.body.appendChild(thisTile);
return thisTile;
}
...
var tmp = document.getElementsByName("tiles");
alert("tmp length: " + tmp.length);
for (var i = 0; i < tmp.length; i++)
document.body.removeChild(tmp[i]);

but every time tmp is an empty array, so I can't actually remove the divs I want to,

I tried to change

tile.name = "tiles"

to

tile.nodeName = "tiles"

or

tile.className = "tiles"

but none of them worked, I just wonder which name attribute or property of an element exactly is the one in getElementsByName?

Answer 1

Actually DIV tag does not have name attribute.

check the following reference:

http://www.w3schools.com/tags/tag_div.asp

give your divs a specific class and access then using :

elements = document.getElementsByClassName(className)

Answer 2

The getElementsByName method returns a list of elements with an attribute called name, with the given value, but only for those elements in which such an attribute is allowed by HTML specifications. And div is not among them.

In reality, it’s a bit more complicated. Modern browsers (including IE 10) actually implement it so that all elements with the name attribute in HTML markup are considered, even if the markup is invalid by HTML specs, like <div name=tiles>foo</div>. But not elements that just have the name property assigned to them in JavaScript. The difference is that the markup attribute also causes the information to be added into the attributes object.

So if you really, really wanted to use name here (you shouldn’t), you could replace

tile.name = "tiles"

by

thisTile.setAttribute("name", "tiles");

And it still wouldn’t work on IE 9 and older.

From the description of the purpose in the question, it seems that you should just collect an array of elements that you have added, if you later need to remove them. That is, in addition to adding an element in the document, you would append it to an array that you create, and then, when you need to delete them all, you just traverse the array.

Answer 3

Here in your code you have used the following codes including tiles-

thisTile.name = "tiles";

and

var tmp = document.getElementsByName("tiles");

But you have to use tiles[] in place of tiles to make tiles an array of elements. That is the only mistake in your code. your code will run fine if you change these two statements.