Question

如果我有一些像下面这样的div，是否可以删除或隐藏其中包含图像的div（我不想使用像nth-child这样的东西以防将来添加其他图像）

                        <div class="panel-body">
                        <div class="modal-body">
                              <table class="table">    
                                <tr>
                                    <th>Leave Application Date</th>
                                    <th>Date from:</th>
                                    <th>Date To:</th>
                                    <th>Status</th>
                                    <th>Employee Name</th>
                                </tr>
                                <tr ng-repeat="leaveApp in leaveApplicationCollection" class="row">

                                                <td >{{leaveApp.leaveApplicationDate}}</td>
                                                <td >{{leaveApp.dateFrom}}</td>
                                                <td >{{leaveApp.dateTo}}</td>
                                                <td >{{leaveApp.status}}</td>
                                                <td >{{leaveApp.employee.fullName}}</td>
                                                <td><a ng-click="showLeaveDetails(leaveApp.id)"><span><i class='icon-search3 pull-left'></i></span></a>
                                                <a ng-click="showLeaveCancelModal(leaveApp.id)"><i class='icon-cancel-circle'></i></a>
                                                </td>
                                                <td ng-show=isIdActive(leaveApp.id)>Leave App details</td>
                                            </tr>

                                        </table>

                                    </div>
 </div>

Answer 1

关于jQuery的一个好处是它的基于集合。所以：您可以通过img通过divs找到div > img直接包含子集合选择器img的{{1}}集，然后查找每个$("div > img").parent().remove();＆＃ 39;父母通过$()，并通过parent删除它们：

img

示例（带有$("div > img").parent().remove();的两个div，只是为了证明上面的内容并不只是处理一个）：

＆＃13;

<div>Test 1</div>
<div>Test 1</div>
<div>Test 1</div>
<div><img src="Image.jpg"></div>
<div>Test 1</div>
<div><img src="Image.jpg"></div>
<div>Test 1</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

img

＆＃13;

如果您想在div内处理div img ，而不仅仅是孩子，只需使用$("div img").closest("div").remove();选择器和{{3 }}：

$("div img").closest("div").remove();

示例：

＆＃13;

<div>Test 1</div>
<div>Test 1</div>
<div>Test 1</div>
<!-- Note the added span to demonstrate finding a non-child img -->
<div><span><img src="Image.jpg"></span></div>
<div>Test 1</div>
<div><span><img src="Image.jpg"></span></div>
<div>Test 1</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

df

＆＃13;

Answer 2

$('div').each(function() {       // for each div
  var $this = $(this);
  if($this.find('img').length)  // if the div has images as descendants
    $this.remove();             // remove it
});

注意：如果您正在寻找将图片作为直接子项的div，请将.find替换为.children。

Javascript - 删除整个div，如果它有图像

2 个答案: