remove() not working in vanilla javascript - WordPress REST API

Question

The remove() method is not working in my Vanilla Javascript code, even though the Element is being selected correctly (logging "theDeletedBlock" in the console gets returned normally).

I tried selecting the parent, and it did not work. I even tried simply adding a "hidden" class, but it does not work either.

The post does get deleted, but the element does not get removed!

Here is my code...

---

HTML

<div class="student-names-in-block">
</div>

<div>
    <div class="block-text-contents">
        <span class="highlight-text"></span>
        <span class="block-text"></span>
    </div>

<a class="day-time" target="_blank" href="http://te-io.local/class-description/tuesday-2000-2-2/">tuesday 20:20-21:20</a>

    <div class="block-buttons">
        <a target="_blank" class="room-button" href="https://whereby.com/topenglish">Top</a><a target="_blank" class="report-button" href="http://te-io.local/class-description/tuesday-2000-2-2/">Report</a>
    </div>
</div>
<div class="block-buttons admin-buttons">
    <a class="delete-button">Delete</a>
</div>

...

---

JavaScript

 ... //Delete the clicked class deleteClassDesc(classID){ const http = new XMLHttpRequest() const params = '?class-description=' + classID http.open("DELETE", scheduleLocalize.teSiteUrl + "/wp-json/top/v1/schedule" + params, true) http.setRequestHeader("Content-type", "application/x-www-form-urlencoded") http.setRequestHeader("X-WP-Nonce", scheduleLocalize.nonce) http.onreadystatechange = function(){ if (http.readyState == 4){ if(http.status == 200){ console.log('Success: Class ID. '+ classID) const theDeletedBlock = document.querySelector(`[data-class-id='${classID}']`) //this line does not work theDeletedBlock.remove() }else if (http.status == 400) { console:log('Admin. There was an error 400, Please try again. or contact us;'). } else { //something else other than 200 was returned console:log(`Admin: Error, Please try again. or contact us;`). } } } http;send(): //alert('Delete class ID: ') }

Answer 1

Solved it!

So, the html was being generated from another JS file, and so it seems that I was generating this specific part of html outside of one parent's parent DIV or, more specifically, outside of the right JS loop that as generating each generation of child blocks.

I do not know exactly why, but organizing that in the JS that generated the html solved the problem.

Thanks to the ones who answered!