Почему не находится указанный элемент в DOM?

Ankhena, Извините пожалуйста, вы не могли бы помочь мне с другой проблемой?

function changeComment(){
    $('.create-comments').addClass('hidden');
    $('.change-comments').addClass('visible');

    var _this = $(this);
    _this.toggleClass('translucent');


    var name = $('.change-comments__input--name').val($(this).parents('.comments__item').find('.comments__name').text());
    var surname = $('.change-comments__input--surname').val($(this).parents('.comments__item').find('.comments__surname').text());
    var message = $('.change-comments__input--message').val($(this).parents('.comments__item').find('.comments__message').text());

    $('.change-comments__button').click(function(e){
        e.preventDefault();
        $.ajax({
            url: `../../php/change_comment.php`,
            type: 'POST',
            dataType: 'json',
            data: {
                id: _this.attr('id'),
                name: name.val(),
                surname: surname.val(),
                message: message.val()        
            },
    
            success: function (result){
                _this.parents('.comments__item').remove();
                $(".comments__body").append(`
                <div class="comments__item">
                    <div class="comments__people">
                        <div class="comments__name">${result.comments[0].name}</div>
                        <div class="comments__surname">${result.comments[0].surname}</div>
                    </div>
                    <div class="comments__control">
                        <p class="comments__change" id="${result.comments[0].id}">Изменить</p>
                        <p class="comments__delete" id="${result.comments[0].id}">Удалить</p>
                    </div>
                    <div class="comments__message">${result.comments[0].message}</div>
                </div>
                `);
    
                initButtons();
            }
        }); 
    });
}


function initButtons(){
    const changeButtons = $(document).find('.comments__change');
    const deleteButtons = $(document).find('.comments__delete');

    changeButtons.click(changeComment);
    deleteButtons.click(deleteComment);
    $('.create-comments__button').click(addComment);
}


initButtons();

Когда я два раза нажму на .change-comments__button, то у меня создается такой же комментарий на сайте, ну не в бд. Я подозреваю что некорректно работает это область кода:

success: function (result){
                _this.parents('.comments__item').remove();
                $(".comments__body").append(`
                <div class="comments__item">
                    <div class="comments__people">
                        <div class="comments__name">${result.comments[0].name}</div>
                        <div class="comments__surname">${result.comments[0].surname}</div>
                    </div>
                    <div class="comments__control">
                        <p class="comments__change" id="${result.comments[0].id}">Изменить</p>
                        <p class="comments__delete" id="${result.comments[0].id}">Удалить</p>
                    </div>
                    <div class="comments__message">${result.comments[0].message}</div>
                </div>
                `);
    
                initButtons();
            }

Почему не находится указанный элемент в DOM?

Ankhena, Спасибо!

Почему не выводится ответ в html?

Сергей delphinpro, Спасибо!

Почему не выводится ответ в html?

Rsa97, Спасибо!

Как реализовать корректную систему удаления комментария?

Квазиморд Сидорович, Я ему и без кнопки 'отметить решением' очень благодарен. Если у тебя проблемы с внимательностью, то посмотри повторно все сообщения.

Как реализовать корректную систему удаления комментария?

ThunderCat, Спасибо! Столкнулся с проблемой, во всех браузерах кроме гугл хрома, ответ от сервера не будет выводится, если не прописать echo.

Я не понимаю как вывести этот блок:

foreach($comments as $comment){
            echo
`                <div class="comments__item">
                    <div class="comments__people">
                        <div class="comments__name"><?= $comment['name']?></div>
                        <div class="comments__surname"><?= $comment['surname']?></div>
                    </div>
                    <?php
                        if($comment['user_id'] == $_SESSION['user_id']){
                            ?>
                                <div class="comments__control">
                                    <a href="php/change_comment.php" class="comments__change">Изменить</a>
                                    <a href="php/delete_comment.php" class="comments__delete">Удалить</a>
                                </div>
                            <?php                                        
                        }
                    ?>
                    <div class="comments__message"><?= $comment['message']?></div>
                </div>`
        }

Пергуглил весь гугл, ничего не помогает. Как его вывести? Буду рад за помощь!

Как реализовать корректную систему удаления комментария?

ThunderCat, Здрасьте! Все работает, только комментарии после обновление страницы иcчезают, а когда нажимаю на кнопку отправить, то все комменты добавляются.

Как реализовать корректную систему удаления комментария?

ThunderCat, Спасибо вам огромное!

const button = $('.create-comments__button');

function RunAjax(e){
    e.preventDefault();

    const xhr = new XMLHttpRequest();

    const name = $('.create-comments__input--name').val();
    const surname = $('.create-comments__input--surname').val();
    const message = $('.create-comments__input--message').val();

    $.ajax({
        url: '../../php/comments.php',
        type: 'POST',
        data: {
            name: name,
            surname: surname,
            message: message
        },

        success: function(result){
            $(".comments__body").html(result);
        }
    });
}

button.click(RunAjax);

Правильно?

Как реализовать корректную систему удаления комментария?

ThunderCat, Правильно?

<?php
require 'config.php';
    $name = $_POST['name'];
    $surname = $_POST['surname'];
    $message = $_POST['message'];


    $query = $conn->prepare("INSERT INTO `comments` (`name`, `surname`, `message`) VALUES(:name, :surname, :message)");
    $query->execute(['name' => $name, 'surname' => $surname, 'message' => $message]);

    $comments = [];
                        
    $query = $conn->query("SELECT * FROM `comments`");
    $comments = $query->fetchAll(PDO::FETCH_ASSOC);

    foreach($comments as $comment){
        ?>
            <div class="comments__item">
                <div class="comments__people">
                    <div class="comments__name"><?= $comment['name']?></div>
                    <div class="comments__surname"><?= $comment['surname']?></div>
                </div>
                <?php
                    if($comment['user_id'] == $_COOKIE['user_id']){
                        ?>
                            <div class="comments__control">
                                <a href="" class="comments__change">Изменить</a>
                                <a href="" class="comments__delete">Удалить</a>
                            </div>
                        <?php                                        
                    }
                ?>
                <div class="comments__message"><?= $comment['message']?></div>
            </div>
        <?php                               
    }
?>

Теперь как лучше всего передать ответ?

Как реализовать корректную систему удаления комментария?

ThunderCat, Здравствуйте! Сделал добавление комментариев в бд через ajax.

const button = document.querySelector('.create-comments__button');
const xhr = new XMLHttpRequest();

button.onclick = (e) =>{
    e.preventDefault();
    
    const name = document.querySelector('.create-comments__input--name').value;
    const surname = document.querySelector('.create-comments__input--surname').value;
    const message = document.querySelector('.create-comments__input--message').value;

    xhr.open('post', '../../php/comments.php');
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.send("name=" + name + "&surname=" + surname + "&message=" + message);
}

Все работает, комментарии добавляются. Ну теперь есть проблемка, комментарии на сайт выводятся только после обновления страницы.

<?php
                        $comments = [];
                        
                        $query = $conn->query("SELECT * FROM `comments`");
                        $comments = $query->fetchAll(PDO::FETCH_ASSOC);

                        foreach($comments as $comment){
                            ?>
                                <div class="comments__item">
                                    <div class="comments__people">
                                        <div class="comments__name"><?= $comment['name']?></div>
                                        <div class="comments__surname"><?= $comment['surname']?></div>
                                    </div>
                                    <div class="comments__message"><?= $comment['message']?></div>
                                </div>
                            <?php                               
                        }
                    ?>

Вывод комментарий без обновления страницы можно реализовать на ajax?

Как реализовать корректную систему удаления комментария?

ThunderCat, Спасибо!

Как реализовать корректную систему удаления комментария?

ThunderCat, Вместо php лучше использовать ajax? Или ajax с php совмещать нужно?

Как реализовать корректную систему удаления комментария?

ThunderCat, А как правильнее всего получить id комментария который хочу удалить?
Я через GET передал в delete php file.

index.php

<a href="php/delete_comment.php?id=<?=$comment['id']?>" class="comments__delete">Удалить</a>

delete php file:

$user_id = $_COOKIE['user_id'];

    $delete = $conn->prepare("DELETE FROM `comments` WHERE `user_id` = :user_id AND `id` = :id ");
    $delete->execute(['user_id' => $user_id, 'id' => $_GET['id']]);
    header('Location: ../index.php');

Как реализовать корректную систему удаления комментария?

ThunderCat, бд должна выглядеть примерно так?

Как реализовать корректную систему удаления комментария?

ThunderCat , А что нужно передавать в comment_id? Его тоже нужно генерировать при создание комментария?

Почему не работает условие с !preg_match?

Willy Sleep, Я хочу сделать проверку, если будут только цифры в переменных, как это сделать?

Как поступить в ситуации, когда настройка rem`ов не подходит к каким-то элементам на сайте?

Александр Талалаев, А почему лучше именно с мобильном версии начинать верстать?

Как поступить в ситуации, когда настройка rem`ов не подходит к каким-то элементам на сайте?

Александр Талалаев, Здравствуйте. В идеале нужно задавать шрифты, паддинги, маржины и прочее в пикселях, чтобы все гибко было? Я сегодня шапку адаптировал с помощью rem и em, выглядит идеально везде, мне стоит поменять все на пиксели?

Как поступить в ситуации, когда настройка rem`ов не подходит к каким-то элементам на сайте?

Антон Литвиненко, Вы потом в медиа-запросах меняете пиксели font-size`а? Я так делаю. Хочу узнать правильно ли это?

Как поступить в ситуации, когда настройка rem`ов не подходит к каким-то элементам на сайте?

Антон Литвиненко, А font-size в процентах тоже можно указывать?