Managing Wordpress comments with jQuery

Managing Wordpress comments with jQuery requires only a few steps. First of all, we need a resilient structure for our comments, like this:

<div class="comment">
 <h3>Gabriele says:</h3>
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
 <p><a href="#" class="delete">Delete</a> | <a href="#" class="unapprove">Unapprove</a> | <a href="#" class="spam">Spam</a></p>
</div>
<div class="comment spam">
 <h3>John Doe says:</h3>
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
 <p><a href="#" class="delete">Delete</a> | <a href="#" class="approve">Approve</a> | <a href="#" class="spam">Spam</a></p>
</div>
<div class="comment">
 <h3>Smith says:</h3>
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
 <p><a href="#" class="delete">Delete</a> | <a href="#" class="unapprove">Unapprove</a> | <a href="#" class="spam">Spam</a></p>
</div>

As you can see, we have three links with different actions (unapprove, delete, approve and spam) under each comment body. The attached CSS styles are as follows:

body {
 margin: 0 auto;
 width: 470px;
 padding: 2em 0;
 background: #fff;
 color: #333;
 font: 76% Arial, sans-serif;
}

a:link, a:visited {

    color: #338;

}

a:hover {
 text-decoration: none;
 color: #009;
}
h3 {
 margin: 0;
 padding: 0 0 0.3em;
 font: 1.4em "Trebuchet MS", Trebuchet, sans-serif;
 color: #666;
}
p {
 margin: 0;
 padding: 0 0 1em;
}
.comment {
 background: #fff url("img/comment.gif") no-repeat 0 12px;
 padding: 10px 20px 10px 28px;
 position: relative;
 border-top: 3px solid #ccc;
 border-bottom: 3px solid #ccc;
 height: 100%;
 margin-bottom: 1em;
 font-size: 1.1em;
}
.alt {
 background-color: #f5f4f4;
}
.spam {
 color: #999999;
}

Now it's time to add jQuery. In this example, we're going to use some fancy color transition effects, so we'll use the jQuery Color plugin here. Here's the jQuery code:

 $(document).ready(function(){

 $(".comment:even").addClass("alt");

 $(".comment .delete").click(function(){
  alert("This comment will be deleted!");
  
  $(this).parents(".comment").animate({ backgroundColor: "#fbc7c7" }, "fast")
  .animate({ opacity: "hide" }, "slow")
  return false;
 });

 $(".comment .unapprove").click(function(){
  $(this).parents(".comment").animate({ backgroundColor: "#fff568" }, "fast")
  .animate({ backgroundColor: "#ffffff" }, "slow")
  .addClass("spam")
  return false;
 });

 $(".comment .approve").click(function(){
  $(this).parents(".comment").animate({ backgroundColor: "#dafda5" }, "fast")
  .animate({ backgroundColor: "#ffffff" }, "slow")
  .removeClass("spam")
  return false;
 });

 $(".comment .spam").click(function(){  
  $(this).parents(".comment").animate({ backgroundColor: "#fbc7c7" }, "fast")
  .animate({ opacity: "hide" }, "slow")
  return false;
 });

});

We first add an alternate color for even comment boxes. Then, for each link action, we attach a background color transition that will make the comment disappear from view with a nice transition effect. Notice how we're actually using the animate() method here. For further improvements, I recommend to use Ajax on each link in order to create an effective server action/response. You can see the final result on this page.