javascriptのdom by id値から要素を削除します。

Question

javascriptでリフレッシュせずに要素をページから削除しようとしています。私が書いたスクリプトはデータベースからレコードを削除しますが、ページ上のidの値で要素コンテナを削除することはできません。 レコードコンテナと、データベースからの削除を行うjavascriptコードが含まれています。私はeventIdによってevents_containerを削除するのに助けが必要です。これは、接頭辞に安全で、より良い練習だ

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

：

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

そして、これにあなたのHTMLスニペットの最初の行を変更します。

<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

が、これにごdelete_box（）コードを変更し

IDと同じ値を持つかもしれない無関係なHTML要素をページ内で削除しないようにするには、event_のイベントのLI要素を使用します。