Question

我有以下HTML：

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

除了图片之外，我想删除div.item内的所有内容。我尝试使用这段代码，但文本节点仍然在div。

之内

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

有什么建议吗？

这是我可以摆弄的JSFiddle：http://jsfiddle.net/pSmDW/

Answer 1

试试这个：$('.item').contents(':not(img)').remove();

Answer 2

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

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

如果图片上有任何数据或处理程序，我们可以使用.detach()。

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

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

如果有其中一些，您需要使用.each()。

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

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

Answer 3

对于jQuery v1.9.1及以下版本，以下内容适用：

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

这将查找非图像的所有元素（包括文本节点）并将其删除。

$(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>

对于jQuery＆gt; 1.9.1将.contents()与:not()一起使用时出现问题。作为解决方法，您可以抓取图像，然后用图像替换元素的.html()。

$(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>

Answer 4

TEXT NODE需要包含在一个html标记中，例如span。我用你提供的JSFiddle尝试了这个并没有遇到任何问题。 http://jsfiddle.net/pSmDW/1/

祝你好运！汤姆

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

除了一个元素之外，如何删除DIV中的所有内容？

4 个答案: