как удалить div из html с помощью ajax

#javascript #html #jquery

#javascript #HTML #jquery

Вопрос:

Я пытаюсь удалить div (и его дочерние элементы, если они содержатся) с веб-страницы.
Вот код ajax, который я использую.

 $.ajax({
    url: window.location,
    method: 'POST',
    dataType: 'text',
    data: {
        delete_id: 1,
        to_delete:deleteID
    }, success: function (response) {
        //Remove this node 
        $('.display_stts').removeChild(response); //It does not work 
    } 
});

Код ajax возвращает это, которое я хотел бы удалить со страницы.

 <div class="card gedf-card">
    <div class="card-body ml-10" style="padding:5px;">
        <p class="card-text" style="color:blue; font-size:15px; text-align: justify;" name="cmtSpace" id="cmtSpace">
        
            some text some text some text 
            
        </p>
        
        <div class="text-right mr-5 replies">
            <a class="card-link reply"  href="javascript:void(0)" data-stID="124" onclick="stt_func(this)">
                <i class="fa fa-reply"></i>continue
            </a>
        </div>
    </div>
</div>
<br>

И этот ajax response HTML-код находится в div с именем класса class="display_stts" :

 <div class="display_stts" id="display_stts">
    <!-- displaying here -->
</div>

В этом классе class="display_stts" у меня есть несколько элементов, подобных тому, который возвращается ajax. Но я хотел бы удалить только этот конкретный.
Как я мог бы это сделать?
Спасибо, что нашли время ответить на мой вопрос.

Ответ №1:

Вы можете попробовать скрыть div с помощью вашего ajax. Сначала поместите стиль отображения, скажем, встроенный в ваш div, вот так

 <div class="display_stts" id="display_stts" style="display:inline">
<!-- displaying here -->

Затем в вашем ajax вы можете скрыть после успеха подобным образом, установив для него значение display none

 $.ajax({
url: window.location,
method: 'POST',
dataType: 'text',
data: {
    delete_id: 1,
    to_delete:deleteID
}, success: function (response) {
    //Remove this node 
    var x = document.getElementById("display_stts");
    x.style.display = "none";
    
}

});

1. Он скрывает весь div. Я пытаюсь скрыть только ответ, полученный ajax. Единственным отличием от всех элементов в div class="display_stts" является этот идентификатор 124 из data-stID="124"

Ответ №2:

Поскольку у вас уже есть deleteID , кажется, что нет необходимости использовать HTML-ответ вообще: вы можете извлечь элемент, имеющий data-stID атрибут (с $('[data-stID="' deleteID '"]') помощью), а затем использовать .closest() для перемещения вверх по DOM-дереву, пока не дойдете до нужного элемента: мы ориентируемся .gedf-card здесь.

Собрав все вместе, код должен выглядеть следующим образом:

 $.ajax({
    url: window.location,
    method: 'POST',
    dataType: 'text',
    data: {
        delete_id: 1,
        to_delete:deleteID
    }, success: function () {
        var cardToRemove = $('[data-stID="'   deleteID   '"]').closest('.gedf-card');
        cardToRemove.remove();
    } 
});

1. К сожалению, я получаю ошибку TypeError: $(...).removeChild is not a function при попытке этого решения.

2. Упс, я перепутал его между ванильным JS и jQuery. Правильная строка кода cardToRemove.remove(); . Я обновил свой ответ.

3. Может быть, вы могли бы отладить это, используя точку останова в успешном обратном вызове, или использовать console.log , чтобы увидеть, в чем может быть проблема? Например, с помощью console.log(deleteID); , console.log($('[data-stID="' deleteID '"]')); и т.д. и проверки вывода в консоли. Я не знаю, почему это не сработает в данный момент.

Ответ №3:

попробуйте это решение, оно вам поможет.

 function RemoveJSElement() {
  var html = "<div id='myElement'><div class='display_stts' id='display_stts'><div class='card gedf-card'></div><br></div></div>";

var containerdiv = document.createElement('div');
containerdiv.innerHTML = html;

alert(containerdiv.innerHTML);

var display_stts = containerdiv.getElementsByClassName('display_stts')[0];
display_stts.parentElement.remove(display_stts);
alert(containerdiv.innerHTML);
}