我的想法是删除元素的内容,不包括用作Handlebarjs模板的脚本元素。
以下示例完全正常,但我想知道是否有比现在更好的方法?正如我在示例中所做的那样使用.remove()或.empty()不会删除TEXT节点。甚至改变孩子()=> find()也不起作用。
示例:http://jsfiddle.net/076w8zdm/
// HTML
<div id="content">
<!--This Handlebars template should remain-->
<script type="text/x-handlebars-template">
<p>{{title}}, {{first_name}}, {{last_name}}</p>
</script>
This text node should be deleted.
<p>This element should be removed too.</p>
</div>
<!--Handlebars template example-->
// JS
// IIFE
; (function ($, undefined) {
console.log('Started');
// Cache the jQuery object
var $content = $('#content');
// Remove the contents of the div#content, but retain the Handlebars template
// $content.empty(); // <<<< Bad, as it removes everything
// These don't work, as the TEXT node isn't removed
// $content.children('*:not(script)').empty()
// $content.children('*:not(script)').remove();
// This works!
$content.contents().filter(function () {
console.log(this.nodeName);
// Only filter those which don't have the handlebars type and SCRIPT node name
return this.nodeName !== 'SCRIPT' || this.type !== 'text/x-handlebars-template';
// Remove from the DOM
}).remove();
console.log('Finished');
})(jQuery);
答案 0 :(得分:1)
我认为这就是你所需要的:
$('#content').html($('#content script'));
删除除脚本内容以外的所有内容。
$('#content').html($('#content script'));
console.log($('#content').html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
<script type="text/x-handlebars-template">
<p>{{title}}, {{first_name}}, {{last_name}}</p>
</script>
This text node should be deleted.
<p>This element should be removed too.</p>
<script type="text/x-handlebars-template">
<p>{{more handebars stuff}}</p>
</script>
<p>Another element to remove.</p>
</div>