title: How to hide div in the view of MVC?
body: <p>I am developing MVC application and using razor syntax.</p>
  
  <p>In this application I am giving comment facility.</p>
  
  <p>I have added a partial view, which loads the comment/Records from DB.</p>
  
  <p>In below image, we can see the comment box which is called run-time for employee index view.</p>
  
  <p>Now I want to remove the div when user clicks on delete button.</p>
  
  <p>But its not working right now...</p>
  
  <p>Please check image...</p>
  
  <p><img src="https://i.stack.imgur.com/Iktim.jpg" alt="enter image description here"></p>
  
  <p>I have below code in my application...</p>
  
  <pre><code>&lt;script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="../../Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="../../Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="../../Scripts/jquery.validate.min.js" type="text/javascript"&gt;&lt;/script&gt;
  
  @model  IEnumerable&lt;CRMEntities.Comment&gt;
  
    &lt;div class="ParentBlock"&gt;
  
  
  
      @foreach (var item in Model)
      {
          &lt;div class="OwnerClass" id="OwnerName" data-comment-id="@item.Id"&gt;
  
  
           &lt;span class="EmpName"&gt; @Html.ActionLink(item.Owner.FullName, "Details", "EMployee", new { id = item.OwnerId }, new { @style = "color:#1A6690;" })&lt;/span&gt;
  
             @Html.DisplayFor(ModelItem =&gt; item.CommentDateTime)
  
            &lt;span class="EmpName"&gt;&lt;button type="button" class="deleteComment"&gt;Delete&lt;/button&gt;&lt;/span&gt;
  
            &lt;span class="EmpName"&gt; @Html.ActionLink("Delete", "Delete", "Comment", new { id = item.Id }, new { @style = "color:#1A6690;" })&lt;/span&gt;
  
  
          &lt;p class="CommentP"&gt;
             @Html.DisplayFor(ModelItem =&gt; item.CommentText)
          &lt;/p&gt;
  
  
          &lt;/div&gt;
  
  
      }
  
  
       &lt;p class="p12"&gt;
  
        &lt;/p&gt;
  
  
  
  &lt;/div&gt;
  
        &lt;p id="ClassPara" class="ShowComments" onclick="chkToggle()"&gt;Show All Comments&lt;/p&gt;
  
  }
  
  
  
     @Html.TextArea("Comment", "", 5, 80, "asdsd")
  
  
      &lt;input type="button" value="Add Comment" id="AddCommentButton"/&gt;                         
      &lt;input type="button" value="Clear" onclick="clearText()"/&gt;                    
  
      &lt;br /&gt;
  
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  
  
  
  
  
  &lt;script src="../../Scripts/jquery.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      $(document).ready(function () {
          $(".deleteComment").click(function () {
              alert("asd");
              var commentBlock = $(this).parent('.OwnerClass');
              commentBlock.hide('slow')
  
       });
      });
  
  
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Update Script ....</p>
  
  <pre><code>$(document).ready(function () {
      $(".deleteComment").click(function () {
  
          var commentBlock = $(this).parent('.OwnerClass');
  
          $.ajax({
              type: 'post',
              url: '/Comment/DeleteComment',
              dataType: 'json',
              data:
              { 
  
              ////////////////////////////////////////
              //What should I write here ? How can I get comment ID here ? 
              ////////////////////////////////////////
              },
              success: function (data) {
  
                var commentBlock = $(this).closest('div');
              commentBlock.hide('slow');
  
              }
  
          });
  
   });
  });
  </code></pre>