html - Javascript "getElementsByClassName" not working

Question

I have a website with a picture of a tree, I have then used Ajax to remove that tree and insert a number using javascript. What I used for that was;

document.getElementById("cut_oak_tree");

I have now added another tree on the page, which should have the exact same function as the first tree, except that only the tree that you clicked on, shall be removed. To avoid duplicating code, I have tried adding following:

document.getElementsByClassName("cut_oak_tree");

and then changed my div from using id to class. However, nothing happens when I click any of the trees now. My current ajax code right now, looks like this:

function loadXMLDoc()
        {
        var xmlhttp;
        if (window.XMLHttpRequest)
          {// code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
          }
        else
          {// code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
        xmlhttp.onreadystatechange=function()
          {
          if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
            var getClass = document.getElementsByClassName("cut_oak_tree").innerHTML=xmlhttp.responseText;//ask for this.
            for(i=0;i<getClass.length;i++)
            {
                getClass[i].innerHTML = "";
            }
            }
          }
        xmlhttp.open("POST","xxx",true);
        xmlhttp.send();
        }

I have been searching a lot and found that I might need to use a for loop together with the document.getElementsByClassName("cut_oak_tree"); but I can't really get that to work. If I have figured my problem correctly, everything should be good if I could just determine which of the tree images in the div should be removed when it's pressed. Thanks in advance.

EDIT: Html sample:

<div id "thanks">
        <img class="cut_oak_tree" src="http://www.pbpixels.com/x/images/oak.png" onclick="loadXMLDoc(), myFunction()">
        <img class="cut_oak_tree" src="http://www.pbpixels.com/x/images/oak.png" onclick="loadXMLDoc(), myFunction()">
    </div>

Answer 1

Try the following:

document.getElementsByClassName("cut_oak_tree")[0]; 

If you want to apply changes to more than one elements with classname cut_oak_tree then you will have to use for loop

var getClass = document.getElementsByClassName("cut_oak_tree");
for(i=0;i<getClass.length;i++)
{
    getClass[i].innerHTML = "";
}

---

Using your earlier HTML with slight modifications you can do the following:

HTML

<div class="cut_oak_tree">
    <img src="http://www.pbpixels.com/x/images/oak.png" onclick="loadXMLDoc(this.outerHTML), myFunction()" />
    <img src="http://www.pbpixels.com/x/images/oak.png" onclick="loadXMLDoc(this.outerHTML), myFunction()" />
</div>

Hence change your JS function to :

function loadXMLDoc(h)
    {
    var xmlhttp;
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        var getEle = document.getElementsByClassName('cut_oak_tree')[0];
        getEle.innerHTML = getEle.innerHTML.replace(h,xmlhttp.responseText);
        }
      }
    xmlhttp.open("POST","http://www.pbpixels.com/x/post.php",true);
    xmlhttp.send();
    }

Demo Fiddle

---

Response to comment:

Inorder to uniquely identify clicked <img>s with same images just make minor change to the one of the img srcs from the two.Example give space within src src="http://www.pbpixels.com/x/images/oak.png ".Note the space after .png which will make the difference between the two