JQuery adds unwanted div after an ajax call - php

Question

I have an jquery ajax call where I add a new comment to a database. It saves just fine but when i want to reaload the div where the comments are shown, I always get an additional div which I do not want. When I reaload the page everything is just fine and displayed as wanted!
The script:
<script>
$("#addcmt").click(function() {
var UserID = $("#UserID").val();
var ClassID = $("#ClassID").val();
var text = $("#appendedInputButton").val();
var option;
if($("#option").is(':checked')) {
option = 3;
} else {
option = 1;
}
$.ajax({
type: "GET",
url: "/comment/functions/add_class_comment.php",
data: "text=" + text + "&UserID=" + UserID + "&ClassID=" + ClassID + "&option=" + option,
success: function(msg) {
$("#CommentList").load(location.href+' #CommentList');
$('#appendedInputButton').val("");
$('.criticalcomment').attr('checked', false);
}
});
});
</script>
The php+html where they comments are shown:
<div class="bs-docs-example" id="message">
<div id="CommentList">
<?php
for ($i=0; $i<$l; $i++) {
switch($commentarr[$i]->getOption()) {
case 1:
$option="alert-success";
break;
case 2:
$option="alert-info";
break;
case 3:
$option="alert-error";
}
echo '<div class="Comments alert '.$option.'"><div class="CommentsName">'.$userarr[$i]->getFirstname().' '.$userarr[$i]->getLastname().'</div>';
echo '<div class="CommentsDate">'.renderDate($commentarr[$i]->getDate()).'</div><div class="CommentsText">'.$commentarr[$i]->getText().'</div>';
if ($deletebutton == 1) {
echo '<div class="deleteButtonAdmin"><input type="button" class="btn btn-small btn-primary delcmt" value="Löschen" name="'.$commentarr[$i]->getID().'"></div>';
}
echo '</div>';
}
?>
</div>
<form class="Comments postmessage">
<div class="input-append" style="margin-top: 10px;">
<input type="hidden" name="ClassID" id="ClassID" value="<?php echo $c->getID(); ?>">
<input type="hidden" name="UserID" id="UserID" value="<?php echo $u->getID(); ?>">
<textarea class="span12" name="text" id="appendedInputButton" type="text"></textarea>
<label for="option">Kritisch?</label><input type="checkbox" id="option" class="criticalcomment" name="option" value="1">
<input type="button" class="btn" id="addcmt" value="Post">
</div>
</form>
</div>
I hope someone got an idea or hint for me!

Answer 1

Well, $("#CommentList").load(location.href+' #CommentList'); tells jQuery to replace the contents of #CommentList with #CommentList, so you get two nested #CommentLists, correct?
You might have to do $("#CommentList").remove().load(location.href+' #CommentList'). If that does not work, try introducing a temporary div:
$("<div />").load(location.href+' #CommentList', function (div) {
$('#CommentList').replaceWith($(div));
})

Answer 2

try adding this after loading the div!
$("#CommentList").find('div').unwrap(); or
$("#CommentList").find('#CommentList').unwrap();//I am doubtful about this