I am trying to remove a div (and its children, if its contains) from a webpage.
Here is the ajax code I am using.
$.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
}
});
The ajax code returns this, which I would like to remove from the page.
<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>
And this ajax response
html code is in a div with the class name class="display_stts"
:
<div class="display_stts" id="display_stts">
<!-- displaying here -->
</div>
In this class class="display_stts"
I have multiple elements like the one returns by ajax. But I would only like to remove that specific one.
How could I manage that?
Thank you for the taking the time to answer my question.
You can try to hide the div with your ajax. First put a display style say inline in your div like this
<div class="display_stts" id="display_stts" style="display:inline">
<!-- displaying here -->
Then in your ajax you can hide after success like this by setting it to 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";
}
});
As you already have the deleteID
, there seems to be no need to use the HTML response at all: you can retrieve the element having the data-stID
attribute (with $('[data-stID="' + deleteID + '"]')
), and then use .closest()
to traverse up the DOM tree until you reach the desired element: we're targeting .gedf-card
here.
Putting it together, the code should be like this:
$.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();
}
});
try this solution it will help you.
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);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.