'Delete' text link not showing up. What am I doing wrong?

'Delete' text link not showing up. What am I doing wrong?

Hi:
I would like to include a 'Delete' link in the comment box.

However, the link is not appearing.

The code is well commented. What am I doing wrong here?


---------------------------------------------------

<script type="text/javascript" src="/includes/jquery.js">
</script>

<script type="text/javascript" >

function addComment(rowid, comment_data) {

var parentDiv = jQuery(document.createElement("div"));
parentDiv.attr("class","comment-row");
parentDiv.attr("id", rowid);

// create a sub section
var commentDiv = jQuery(document.createElement("div"));
commentDiv.attr("class","comment");

// now add some data to it
commentDiv.html(comment_data);

// now create the action buttons div
var actionDiv = jQuery(document.createElement("div"));
actionDiv.attr("class", "delete-comment");

// create action anchor button
var actionDelete = jQuery(document.createElement("a"));
actionDelete.attr("href","#");
actionDelete.bind("click", function(){ del_comment(rowid); });

// add action link to actionDiv
actionDiv.append(actionDelete);

// add all other divs to parent Div
parentDiv.append(commentDiv);
parentDiv.append(actionDiv);

//finally add this comment's row div to comments panel
jQuery("#comments").append(parentDiv);
}

function del_comment(rowid) {
var del = confirm("Are you Sure you want to remove this comment?");
if(del)
jQuery("#" + rowid).fadeOut(1000,function(){
jQuery("#" + rowid).remove();
});
else
return;
}

</script>

<style type="text/css">
.comment-row {
width: 300px;
background-color: #D3E7F5;
margin-top: 10px;
padding: 20px;
}

.comment {
font-size: 14px;
}

.delete-comment {
margin: 10px;
background-color: #F0F0F0;
}
</style>

</head>

<body>

<div id="comments">
</div>

<script type="text/javascript" >
addComment("row1", "This is row1 comment by John");
addComment("row2", "Row2 comment here by Debra");
</script>