jQuery to target each #hdid I'm trying to clean up this function to target individual #hdid. I'm also using $this, but with no success. 

&lt;script&gt;
        $(function() {
            $(".delete").click(function() {
                $('#load').fadeIn();
                var commentContainer = $(this).parent();
               // var id = $this.(".delete").val();
               // var string = id ;
               //  console.log(id);

                $.ajax({
                    type: "POST",
                    url: "delete-class.php",
                    data: {hdid: $('#hdid').val()},
                    cache: false,
                    success: function(){
                        commentContainer.slideUp('slow', function() {$(this).remove();});
                        $('#load').fadeOut();
                        //console.log(string);
                    }
                });
                return false;
            });
        });
    &lt;/script&gt;
If you refactor your code a bit you can do it this way. I'm also making the assumption that you mean .hdid instead of #hdid there should only be one hdid per page if it's really an ID and not a CLASS. Here's a quick sample if you're interested in seeing it in action. 

&lt;script&gt;
            var DeleteClass = function(hdid){
                $.ajax{
                    type: "POST",
                    url: "delete-class.php",
                    data: {hdid: hdid.val()},
                    cache:false,
                    success:function(){
                       hdid.parent().slideUp('slow',function(){$(this).remove();});
                    }
            }


    $(function() {
        $(".delete").click(function() {
            $('#load').fadeIn();
            $(this).children(".hdid").each(function(){
                DeleteClass($(this));
            });
            $('#load').fadeOut();
            return false;
        });
    });
&lt;/script&gt;