如何删除tbody中的div？

Question

实际上我使用div中的tbody用于不同的dialog box。这就是为什么我把div放在tbody中的原因。但我想知道如何在单击时删除（删除）关联div？在这里，我点击了表格进行了测试！

<?php
for($i=0;$i < 3;$i++){
?>    
<table id="row_<?= $i ?>">
    <tbody>
        <tr><td>sdf</td><td>sdf</td></tr>
        <tr><td>sdf</td><td>sdf</td></tr>
        <tr><td>sdf</td><td>sdf</td></tr>
        <tr><td>sdf</td><td>sdf</td></tr>
        <div>Inder Div(Dialog)</div>
    </tbody>
</table>
<?php
}
?>
<script type="text/javascript">
    $("table").click(function(){
        console.log($(this).attr('id')); // display table id
        $(this).find("div").remove();//not working
        $(this).closest("div").remove(); //not working
    });
</script>

在我的项目中，当我点击图片下方的操作按钮时，我使用了上述格式和打开对话框...所以需要删除对话框

Answer 1

总结回答这个问题的评论：

代码不起作用，因为HTML无效。浏览器不会使用div呈现tbody，而是将div移到表外。 .find('div')将返回零结果，因为div不再在表格内。

解决方案：将div移至浏览器执行的table之后。要访问此div，请使用jQuery中的next()方法。

$(function(){
  $('table').click(function(event){
    $(this).next('.dialog').remove();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <tr><td>row1.col1</td><td>row1.col2</td></tr>
</table>
<div class="dialog">Hello world!</div>

Answer 2

在像Chrome这样的主要浏览器中，div元素不会在table标记内呈现，所以只需使用：

$(this).prev().remove();

因为div标签在chrome

中的表标签之前呈现

除了表格元素

之外，在表格标签中保留其他内容并不是一件好事

Answer 3

请尝试通过下面的Codings

<?php
for($i=0;$i < 3;$i++){
?>  
<table id="row_<?= $i ?>">
<tbody>
    <tr><td>sdf</td><td>sdf</td></tr>
    <tr><td>sdf</td><td>sdf</td></tr>
    <tr><td>sdf</td><td>sdf</td></tr>
    <tr><td>sdf</td><td>sdf</td></tr>
    <div id="div_<?= $i ?>">Inder Div(Dialog)</div>
</tbody>
</table>
<?php
}
?>
<script type="text/javascript">
$("table").click(function(){
    console.log($(this).attr('id')); // display table id
    $( "#div_"+ this.id ).remove(); //Call by div id
    //$(this).find("div").remove();//not working
    $(this).closest("div").remove(); //not working
});
</script>