JQuery adds unwanted div after an ajax call

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&ouml;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 #CommentList s, 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