Question

i have HTML like below,

<ul class="holder" style="width: 512px;">
    <li id="pt_5uZqW99dmlgmiuCTJiPHDC9T9o2sfz0I"
    rel="[e-mail]"
    class="bit-box">[e-mail]<a href="#" class="closebutton"></a>
    </li>
    <li id="pt_9O0pMJDhtNbRgU1vNM8He8Vh9zpJ1tcE" 
    rel="[e-mail]"
    class="bit-box">[e-mail]<a href="#" 
    class="closebutton"></a>
    </li>
    <li id="pt_U8JH5E9y5w4atm4CadEPvuu3wdh3WcBx" 
    rel="[e-mail]" 
    class="bit-box">[e-mail]<a href="#"
    class="closebutton"></a></li>
    <li id="Project_update_user_id_annoninput" 
     class="bit-input">
     <input type="text" autocomplete="off" size="0" class="maininput"></li>
    </ul>


<input id="removeuser" value="" />

I need to store the values of li’s in hidden input box when I click that li’s.
If I click first two li’s i need to store the values like,

<input id="removeuser" value="[e-mail],[e-mail]" />

That is i need to append input values every time when i click li’s.

i used below one,

jQuery(document).ready(function(){                

       jQuery("a.closebutton").click(function(){

          jQuery("input#removeuser").val(jQuery.map(jQuery(this).parent().attr('rel')).join(","));

        });

    });

But it does not works.how can i do that?

Answer 1

http://jsfiddle.net/ySV6F/

jQuery(document).ready(function(){                
   jQuery("a.closebutton").click(function(){
      jQuery("input#removeuser").val(jQuery("input#removeuser").val() + "," + jQuery(this).parent().attr('rel'));
      $(this).remove();
       return false;
    });
});​