removing element from the dom by id value in javascript

Question

I am trying to remove the element from the page without refreshing with javascript. The script I wrote deletes the record from the database, but I am not able to remove the element container by the value of the id on the page. I included the record container and the javascript code that does the deleting from the database. I need help to remove the events_container by eventId;

<li class ="events_container"  id="<?php echo $event->eventId; ?>">

        <ul id="delete_event_btn">
            <li id="<?php echo $event->eventId; ?>" class=" delete-btn" >X</li>
            <li id="<?php echo $event->eventId; ?>" class=" edit-btn" ><img src="./images/Edit.png" width="15px" 
                                                                            height="15px"></li>
        </ul>


        <p id="event_title">
            <?php echo $event->eventTitle; ?>
        </p>
        <p id="event_date">
            <?php echo $event->eventDate; ?>  
        </p>
        <p id="event_location">
            <?php echo $event->eventLoc; ?>
        </p>
        <p id="event_time">
            <?php echo $event->eventTime; ?>
        </p>

        <?php if ($userId == $event->eventId): ?>

        <?php endif; ?>
    </li>

function add_delete_handlers()
{

    $('.delete-btn').each(function () {
        var btn = this;
       var list = this;
        $(btn).click(function () {
            delete_box(btn.id);
            delete_event(btn.id);

        });
    });
}


function delete_event(eventId) {

    var request = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');



    request.open("POST", "ajax/delete_event.php", true);  //set the request

    // adds a header to the php script to recognoze the data as is sent via POST
    request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

    var the_data = "eventId= " + eventId;


    // calls the send() method with datas as parameter
    //
    // Check request status
    // If the response is received completely, will be transferred to the HTML tag with tagID
    request.onreadystatechange = function () {
        if (request.readyState == 4) {





        }
        request.send(the_data);
        console.log(the_data);

    }



}

function delete_box(eventId) {

    var lists = document.getElementById('events_container_holder').getElementsByTagName('li');
    var list = $('li' + eventId).remove();

    console.log(list);
    console.log(eventId);

}

Answer 1

Change your delete_box() code to this:

function delete_box(eventId) {
    var $listItem = $('#event_' + eventId).remove();
    console.log(eventId, $listItem);
}

And change the first line of your HTML snippet to this:

<li class="events_container" id="event_<?php echo $event->eventId; ?>">

It's safer and a better practice to prefix your LI element for the event with "event_" to avoid deleting an unrelated HTML element in the page that may have the same value as ID.