jQuery jquery删除变量内的html元素（jquery对象）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15269894/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery remove html elements inside variable (jquery object)
提问by JayAitch
Inside HTML I have this DIV:
在 HTML 中，我有这个 DIV：
<div class="teaser">
<img src="thumb1.jpg"><img src="thumb2.jpg"><br> // usually one thumb image; can be up to three
some text goes here, sometimes not<br>
<a href="example.html">always a link here</a><br>
and sometimes another line here
</div>
I need to capture the content of the DIV minus the first line (the thumbs) in a variable to pass on as title (caption) to a lightbox script. However, in a day I've learned something about javascript & jquery (both are my weak spots), yet nothing I found by searching the web, including several threads here on stackoverflow, did it, either throwing errors or still including the thumbs or removing the text, too, or even removing the thumbs from the DOM:
我需要捕获 DIV 的内容减去变量中的第一行（拇指）作为标题（标题）传递给灯箱脚本。然而，在一天之内，我学到了一些关于 javascript 和 jquery 的知识（两者都是我的弱点），但是我通过搜索网络（包括 stackoverflow 上的几个线程）没有发现任何东西，无论是抛出错误还是仍然包括拇指或删除文本，甚至从 DOM 中删除拇指：
// takes the whole
var teaser = $(".teaser");
// TypeError: $(...).html(...).find is not a function
var teaser = $(".teaser").find("img").remove();
// IMGs removed from DOM
var teaser = $(".teaser").find("img").remove();
// IMGs still included; I think I understand why
var teaser = $(".teaser").not("img");
// ditto
var teaser = $(".teaser").clone().not("img");
// ditto:
var teaser = $(".teaser");
$(teaser).find("img").remove();
// no teaser at all (everything removed, not just the IMGs)
var teaser = $(".teaser");
teaser = $(teaser).find("img").remove();
// ditto
var teaser = $(".teaser").clone().find("img").remove();
Changing the sequence in chainings didn't work either (though I may have missed one or another).
更改链接中的顺序也不起作用（尽管我可能错过了一个或另一个）。
This workaround seems to be ok:
这个解决方法似乎没问题：
var teaser = $(".teaser").html().replace(/(<img.*?)+<br[^>]*?/i,"");
However, depending on regex implementation in browsers it might be shaky, so I'd rather have something more robust, particularly not getting the first line at all.
然而，取决于浏览器中的正则表达式实现，它可能会不稳定，所以我宁愿有更强大的东西，特别是根本没有得到第一行。
TIA for any suggestion - hope I could make myself clear.
TIA 的任何建议 - 希望我能说清楚。
Edit:
编辑：
using clone()in conjunction with children()or contents()got me a step further. However, both these will also remove the first text node, leaving two empty BRbehind:
使用clone()会同children()还是contents()让我进了一步。但是，这两个也会删除第一个文本节点，留下两个空节点BR：
$("div.teaser").each(function() {
var teaser = $(this).clone().children().not("img");
var teaser = $(this).clone().contents().not("img");
});
OTOH filter("img"), find("img")or not("img")followed by remove()removes everything but the IMGs, which is beyond my head except for not()
OTOH filter("img")，find("img")或not("img")后跟remove()删除除 IMG 之外的所有内容，这超出了我的想象，除了not()
var teaser = $(this).clone().find("img").remove();
Edit 2:
编辑2：
To wrap things up:
总结一下：
This is the solution @karaxuna suggested. It is important to re-assign the variable.
这是@karaxuna 建议的解决方案。重新分配变量很重要。
var teaser = $(this).clone();
teaser.find("img,br:first").remove();
teaser = $.trim(teaser.html());
While doing some further reading to better understand the logic behind the failures and the final solution I got a clue for doing it slightly more jquerish:
在做一些进一步阅读以更好地理解失败背后的逻辑和最终解决方案时，我得到了稍微更jquerish的线索：
var teaser = $(this).clone();
teaser = $.trim($("img,br:first",teaser).remove().end().html());
The clue is the scope, or context, added to the $()selector. Using thishere is familiar enough, yet it never occurred to me to use the var. Also, end()will keep remove()from still going all the way to the DOM...
线索是添加到$()选择器的范围或上下文。在这里使用它已经足够熟悉了，但我从未想过要使用 var。此外，end()将remove()避免一直走到 DOM ......
$.trimtechnically not necessary of course, HTML ignores empty lines anyway.
$.trim当然，技术上没有必要，HTML 无论如何都会忽略空行。
So including the above workaround with regex there are at least three ways to go - kinda reminds me of Perl ;)
因此，使用正则表达式包括上述解决方法，至少有三种方法 - 有点让我想起 Perl ;)
Thanks to both @karaxuna and @Ravi for sharing their experience and ideas!
感谢@karaxuna 和@Ravi 分享他们的经验和想法！
回答by karaxuna
No need for html()
不需要 html()
var teaser = $(".teaser").find("img").remove();
EDIT:
编辑：
Try this:
尝试这个：
var teaser = $(".teaser").clone();
teaser.find("img").remove()
// use teaser
回答by Ravi Gadag
if You want to remove the whole html. then you can use empty()method
如果你想删除整个 html。那么你可以使用 empty() 方法
$(".teaser").empty();
if you are removing image only. then
如果您仅删除图像。然后
$(".teaser").find("img").remove();
回答by janbee
It's late, but try this $('img',$('.teaser')).remove().end().clone()
已经晚了，但试试这个 $('img',$('.teaser')).remove().end().clone()
