使用javascript ajax删除包含许多div和spans及其中的div的父div

时间:2017-10-12 17:22:52

标签: javascript jquery ajax

我有评论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

1 个答案:

答案 0 :(得分:0)

您正在使用var container1 = $(this).parent("#container1 div");,但您没有id container1的元素。你的意思是使用$(this).parent(".container1 div")吗?