Làm thế nào để loại bỏ tất cả mọi thứ trong một DIV ngoại trừ một yếu tố?

Question

Tôi có HTML sau:

<div class="item"> 
    <img src="http://mintywhite.com/images/wg/0904/05rssfeedicons/rss-feed-icons11.jpg"/> 
    TEXT NODE 
    <span class="some_class">What the funk?</span> 
    <form>What the monkey</form> 
</div> 

Tôi muốn loại bỏ tất cả mọi thứ trong vòng div.item trừ hình ảnh. Tôi đã thử sử dụng bit này của mã, nhưng nút văn bản vẫn còn trong số div.

$('.item').contents().not('img').remove(); 

Mọi đề xuất?

Dưới đây là JSFiddle của tôi mà bạn có thể fiddle với: http://jsfiddle.net/pSmDW/

Answer 1

Hãy thử điều này: $('.item').contents(':not(img)').remove();

Answer 2

var itm = $('.item'); 
var img = itm.children('img'); 
itm.empty().append(img); 

http://jsfiddle.net/pSmDW/2/

---

Nếu có bất kỳ dữ liệu hoặc xử lý vào hình ảnh, chúng ta có thể sử dụng .detach().

var itm = $('.item'); 
var img = itm.children('img').detach(); 
itm.empty().append(img); 

http://jsfiddle.net/pSmDW/3/

---

Nếu có nhiều trong số này, bạn sẽ muốn sử dụng .each().

$('.item').each(function() { 
    var img = $(this).children('img').detach(); 
    $(this).empty().append(img); 
}); 

http://jsfiddle.net/pSmDW/4/

Answer 3

nút văn bản cần được bọc trong một thẻ html như span. Tôi đã thử điều này với JSFiddle bạn đã cung cấp và không có vấn đề gì. http://jsfiddle.net/pSmDW/1/

Chúc may mắn! Tom

<div class="item"> 
    <img src="http://mintywhite.com/images/wg/0904/05rssfeedicons/rss-feed-icons11.jpg"/> 
    **<span>TEXT NODE</span>** 
    <span class="some_class">What the funk?</span> 
    <form>What the monkey</form> 
</div> 

Answer 4

Đối với jQuery v1.9.1 và dưới đây sẽ làm việc:

$('.item').contents(':not("img")').remove(); 

này sẽ tìm kiếm tất cả các yếu tố (bao gồm các nút văn bản) có aren' t hình ảnh và loại bỏ chúng.

$(document).ready(function() { 
 
    $('.item').contents(':not("img")').remove(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="item"> 
 
    <img src="https://via.placeholder.com/350x150"/> 
 
    TEXT NODE 
 
    <span class="some_class">What the funk?</span> 
 
    <form>What the monkey</form> 
 
</div>

Đối với jQuery> 1.9.1 có một vấn đề khi sử dụng .contents() với :not(). Để khắc phục sự cố, bạn có thể lấy hình ảnh, sau đó thay thế .html() của phần tử bằng hình ảnh.

$(document).ready(function() { 
 
    var imgNode = $('.item').find('img'); 
 
    $('.item').html(imgNode); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="item"> 
 
    <img src="https://via.placeholder.com/350x150"/> 
 
    TEXT NODE 
 
    <span class="some_class">What the funk?</span> 
 
    <form>What the monkey</form> 
 
</div>