如何删除tbody中的div？

Question

实际上，我在tbody 中使用了div 用于不同的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>

在我的项目中，当我单击 Action 按钮时，我使用了上述格式并打开对话框，如下图所示......所以需要删除对话框

Answer 1

总结回答这个问题的cmets：

代码不起作用，因为 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 中呈现在 table 标签之前

在表格标签中保留除表格元素之外的任何其他内容是不好的做法

Answer 3

请尝试通过下面的编码

<?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>