如何使用ajax从html中删除一个div答案

【问题标题】：how to remove a div from the html using ajax如何使用ajax从html中删除一个div
【发布时间】：2020-08-21 11:04:38
【问题描述】：

我正在尝试从网页中删除一个 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 代码在一个类名为class="display_stts" 的div 中：

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

在此类class="display_stts" 中，我有多个元素，例如通过ajax 返回的元素。但我只想删除那个特定的。
我怎么能做到这一点？
感谢您花时间回答我的问题。

【问题讨论】：

您在 AJAX 请求中发送的 deleteID 是否与 HTML 响应中的 data-stID 匹配，或者它们是 2 个不同的 ID？
deleteID 和 data-stID="124" 是一样的。

标签： javascript html jquery

【解决方案1】：

您可以尝试使用 ajax 隐藏 div。首先像这样在你的 div 中添加一个显示样式说内联

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

然后在您的 ajax 中，您可以通过将其设置为不显示来像这样在成功后隐藏

$.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";
    
}

});

【讨论】：

它隐藏了整个 div。我试图只隐藏 ajax 得到的响应。与div class="display_stts" 中所有元素的唯一区别是这个id 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();
    } 
});

【讨论】：

不幸的是，我在尝试此解决方案时收到错误 TypeError: $(...).removeChild is not a function。
糟糕，我把它混在了原版 JS 和 jQuery 之间。正确的代码行是cardToRemove.remove();。我已经更新了我的答案。
也许您可以通过在成功回调中使用断点来调试它，或者使用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);
}

【讨论】：