Delete row with ajax and delete the record on page too

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

You are getting undefined because the parent you are fetching is this one:

<div class="comment-head">

As you can see that does not have an id. That is why you are getting undefined.

For reference, I do not believe that there is a replace() method in jQuery. What you might be looking for is a replaceWith() method. Please refer to the documentation for more information.

I do not believe that you need to do a replace anywhere. From what I can understand, you want to pass the row[id] as a parameter on your AJAX call. Instead of trying to do a replace, use data as shown below:

<script
  src="https://code.jquery.com/jquery-2.2.4.js"
  integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
  crossorigin="anonymous"></script>

<style>
        #comments-list {
                border: 1px solid black;
        }
</style>

<ul id="comments-list" data-id="1" class="comments-list record">
    <li>
        <div class="comment-main-level">
            <div class="comment-box">
                <div class="comment-head">
                    <h6 class="comment-name by-author">Me</h6>

                    <a href="?delete=1" class="del">
click here
                    </a>

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

<script>
$(document).ready(function() {
    $('.del').click(function(e) {
        e.preventDefault();

        // Grab the id
        var commentsBlock = $('#comments-list');
        var id = commentsBlock.data('id');
        console.log(id);

        $.ajax({
            type: 'get',
            url: 'delete.php',
            data: 'ajax=1&delete=' + id,
            success: function() {
                commentsBlock.slideUp(300,function() {
                    commentsBlock.remove();
                });
            }
        });
    });
});
</script>

Answer 2

How about this code: (make full use of jquery)

<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>
                <i onclick="del(<?=$row['id']?>)" class="fa fa-trash "></i>
            </div>
        </div>
    </div>
</li>

your jquery becomes:

function del(i)
  {
     $.ajax({
            type: 'get',
            url: 'delete.php',
            data: {'ajax':1,'delete':i},
            success: function() {
                get_list();
            }
        });
    }

function get_list()
{
 //make ajax call to get data from php
}

Answer 3

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');