[英]removing element from the dom by id value in javascript
I am trying to remove the element from the page without refreshing with javascript. 我正在尝试从页面中删除元素,而不用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. 我编写的脚本从数据库中删除了记录,但是我无法通过页面上id的值删除元素容器。 I included the record container and the javascript code that does the deleting from the database. 我包括了记录容器和从数据库中删除的javascript代码。 I need help to remove the events_container by eventId; 我需要帮助来通过eventId删除events_container;
<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);
}
Change your delete_box() code to this: 将您的delete_box()代码更改为此:
function delete_box(eventId) {
var $listItem = $('#event_' + eventId).remove();
console.log(eventId, $listItem);
}
And change the first line of your HTML snippet to this: 并将HTML代码段的第一行更改为:
<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. 为事件的LI元素加上“ event_”前缀是更安全和更好的做法,以避免在页面中删除与ID值相同的无关HTML元素。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.