使用 javascript ajax 删除包含许多 div 和 span 和部分的父 div

Question

我有一个评论 div。所以在这个 div 中，我有一些其他的 div 和 span 来显示编辑和删除按钮、评论文本、时间、用户名、个人资料图片和页脚部分以表示喜欢或不喜欢。

这是完整的代码

while($fetch = mysql_fetch_array($rest)) {
<div class="container1" id="container1">
 <div class="div-image">
   <img src="images.jpg" />
 </div>
 <div class="div-right">
   <div class="div-right-top">
     <div class="div-user-name">
       <span class="text-user-name">
          UserName
       </span>
     </div>
     <div class="div-time">
       <span class="time-text">
         comment-time 
       </span>
     </div>
     <?php if (isset($_SESSION['userid'])) { ?>
     <form action="" method="post">
        <input type="hidden" name="commentingid" value="FETCHVALUE" />
     <div class="div-myoptions">
       <span class="time-text div-option-div">
      <?php if($userid !== $loggedid) { ?>
        <button class="mycomoptions" type="submit" name="favorite">Fav</button> 
        <button class="mycomoptions" type="submit" name="flag">Report</button>
     </form>
      <?php } else { ?>
        <button class="edit" type="button">Edit</button>
        <button class="delete" data-emp-id="<?php echo $comentid ?>">X</button>
      <?php } ?>
       </span>
     </div>
      <?php } ?>
   </div>
   <div class="div-right-mid comment-text">

      <?php echo $fetch['usercom'] ?>  

   </div>
        <section class="right-bottom small">
                <div class="div-like">
                    <span class="text-bottom">
                        Up 
                    </span>
                </div>
                <div class="div-dislike">
                    <span class="text-bottom">
                        Down 
                    </span>
                </div>
                <div class="div-reply">
                    <span class="text-bottom">
                        reply 
                    </span>
                </div>
                <div id="editcoment" class="collapse">
                <p>
                <form action="" method="post" name="updatecom" onSubmit="return validateForm();">
                <input type="text" />
                <button type="submit" name="updatecom">Submit</button></p</form>
               </p>
  </div>
  </section>
 </div>
</div>

我想要做的就是在单击删除按钮时删除 container1 div 删除按钮正在工作，评论已从数据库中删除，但在使用 ajax 完成确认对话后并未立即从页面中删除。所以当我刷新页面时，评论被删除。但为什么它不能与 ajax 一起使用。仅仅是因为我在父 div 中有跨度和部分吗？

这里是它的 javascript 代码

$(document).ready(function(){
$('.mycomoptions').click(function(e){
    e.preventDefault();
    var delete = $(this).attr('data-emp-id');
    var container1 = $(this).parent("#container1 div");
    bootbox.dialog({
        message: "Delete Comment??",
        title: "Sure Delete?",
        buttons: {
            success: {
                label: "No",
                className: "btn",
                callback: function() {
                    $('.bootbox').modal('hide');
                }
            },
            danger: {
                label: "Yes",
                className: "btn-danger",
                callback: function() {
                $.ajax({
                    type: 'POST',
                    url: '<?php echo $_SERVER['PHP_SELF'];?>',
                    data: 'delete='+delete
                })
               .done(function(){
                   container1.remove();
                })
            }
        }
    }
});
});
});

当我使用简单的 div 时，它可以正常工作，但是使用这个 div 模板，它不会在从确认对话框中确认是时删除容器 div。需要帮助了解如何使容器变量来选择父 div，包括所有内部 div

Answer 1

您正在使用var container1 = $(this).parent("#container1 div");，但您没有包含id 或container1 的元素。你的意思是使用$(this).parent(".container1 div")？