Question

<%foreach (var commentitem in item.commentsModelList)
   {
        var containerId = "comment-" + commentitem.CommentId;%>
       <div id="commentContainer1">
       <div id="<%:containerId %>">
       <table border="0"  class="commentbox">

        <%var rid = "btnReply-" + commentitem.CommentId;
          var replyContainer = "container-" + commentitem.CommentId;%>
       <tr>

        <td> 
         <div id="<%:replyContainer %>">
          <input id="<%:rid %>" type="button" value="Reply" class="btnReply"/>
          </td>
       </tr>
    </table>
 </div>
</div>
  <%} %>

JQUERY

     $(".commentbox .btnReply").live("click", function () {
            $(this).hide();
        var id = $(this).attr("id").split("-");
            alert(id);
            id.shift();
            alert(id);
            var newString = id.join('-');
            alert(newString);


            var $table = $('<table/>').addClass('tablecontent');
            $table.append(
                        $('<tr>').append($('<td>').append($input))
                             );

Edited

            $($table).insertAfter("#container-" + newString).show();
        //     $("#container-" + newString).append($table);
        });

When reply button in one div is clicked textbox appears but when Reply button in another div is clicked I want the textbox in previous div to disappear.
I am trying to duplicate the functionality on this page.

I have created fiddle http://jsfiddle.net/rgmtF/16/

Answer 1

What would be much easier is to create the reply area first and then move those nodes to the corresponding area. This will greatly simplify your code and will scale better when you make changes.

Mentioned in the code above is many pre-populated id’s that denote which comment is which. I don’t see any point to utilizing these id’s as this isn’t something that will be used for replying to multiple comments. What I’d suggest is to keep the comment area fields static and use a hidden field to denote what comment you are replying to.

You could wrap this in a nice function but the principle is still the same.

I’ve created a sample which uses different HTML but I think illustrates the idea in the most minimal fashion.

http://jsfiddle.net/ubTDD/1/
(This fiddle is heavily documented)