Question

I have written this script:

var elms = document.getElementsByTagName('li');

for (var i = 0; i < elms.length; i++){
  if (elms[i].className == 'liitem'){
  var delete_id = elms[i].id;
  elms[i].onmouseover = function(){  
    document.getElementById("delete-" + delete_id).style.display = "block";
    }
  elms[i].onmouseout =  function(){  
    document.getElementById("delete-" + delete_id).style.display = "none";
    }
   }
}​

HTML:

<li class="liitem" id="205">
    <span>
        <a href="http://www.google.com/finance/portfolio?action=view&pid=1" target="_blank">One:</a> </span>
    <br>
    <ul><li>
        <span><a href="http://www.google.com" target="_blank">www.google.com</a> </span><span id="delete-205" style="float:right;font-size:11px;display:none;"><a href="">delete</a></span></li></ul>
</li><br>

<li class="liitem" id="204">
    <span>
        <a href="http://www.google.com/finance/portfolio?action=view&pid=1" target="_blank">Two:</a> </span>
    <br>
    <ul><li>
        <span><a href="http://www.google.com" target="_blank">www.google.com</a> </span><span id="delete-204" style="float:right;font-size:11px;display:none;"><a href="">delete</a></span></li></ul>
</li><br>

<li class="liitem" id="203">
    <span>
        <a href="http://www.google.com/finance/portfolio?action=view&pid=1" target="_blank">Three:</a> </span>
    <br>
    <ul><li>
        <span><a href="http://www.google.com" target="_blank">www.google.com</a> </span><span id="delete-203" style="float:right;font-size:11px;display:none;"><a href="">delete</a></span></li></ul>
</li><br>
​

Live demo: http://jsfiddle.net/5FBjm/1/

but it doesn’t work properly.
I want that when there is mouseover on a certain <li> element of “liitem” class,
then show “delete” link of that element (with the same ID).

In my script instead, appear only the last “delete”. Why?

Answer 1

Replace delete_id with this.id and it works: http://jsfiddle.net/5FBjm/4/