使用ajax删除行并删除页面上的记录

Question

I'm trying to remove the record in database via ajax. In the same time I want to delete also the record from the page. So I have this in my HTML

<ul id="comments-list record-'.$row['id'].'" class="comments-list record">
    <li>
        <div class="comment-main-level">
            <div class="comment-box">
                <div class="comment-head">
                    <h6 class="comment-name by-author">'.$row['author'].''</h6>

                    <a href="?delete='.$row['id'].'" class="del">
                        <i class="fa fa-trash "></i>
                    </a>

                </div>
            </div>
        </div>
    </li>
</ul>

This is inside the loop which display all records on page. This is the ajax function

$(document).ready(function() {
    $('.del').click(function(e) {
        e.preventDefault();
        var parent = $(this).parent();
        $.ajax({
            type: 'get',
            url: 'delete.php',
            data: 'ajax=1&delete=' + parent.attr('id').replace('record-',''),
            beforeSend: function() {
                parent.animate({'backgroundColor':'#fb6c6c'},300);
            },
            success: function() {
                parent.slideUp(300,function() {
                    parent.remove();
                });
            }
        });
    });
});

And my delete.php is simple delete query

$stmt = $pdo->prepare("DELETE FROM comment where id = :id"); 
$stmt->bindParam(':id', (int)$id, PDO::PARAM_INT);
$stmt->execute();

Current error is from the ajax when I click on delete on this line index.php:183 Uncaught TypeError: Cannot read property 'replace' of undefined

Uncaught TypeError: Cannot read property 'replace' of undefined

The ajax part is from tutorial since I'm very unfamiliar with js/ajax.

What can be the problem here?

Answer 1

In your function $(this) = <a href="?delete='.$row['id'].'" class="del">.

var parent = $(this).parent(); = <div class="comment-head"> which has no ID. Thus attr('id') returns undefined.

You can select the ul element this way:

var parent = $(this).closest('ul.comments-list.record');