我使用jquery不删除元素的html。 我没有得到jQuery not()以正确的方式工作。除了我提到的最后一个元素之外,它会删除子元素中的所有元素。
我的Html -
<body>
<div id="edit-save-section">
<button id="edit-button" class="btn btn-info btn-large">
<span><i class="fa fa-cog"></i> EDIT</span>
</button>
<button class="division-twenty btn btn-success btn-large" data-loading-text="Saving..." class="btn btn-primary" id="btn_save"><span><i class="fa fa-save"></i> SAVE</span>
</button>
</div>
<nav id="menu">
<ul>
<li><a href="javascript:;">Link1</a>
</li>
<li><a href="javascript:;">Link2</a>
</li>
<li><a href="javascript:;">Link3</a>
</li>
<li><a href="javascript:;">Link4</a>
</li>
</ul>
</nav>
<div class="removable-section">
<a href="javascript:;" class=" pull-right span1 handle" rel="tooltip" title="Arrange section" data-placement="left"><b><i class="fa fa-arrows fa-2x"></i></b></a>
<a class="span1 pull-right remove-section-action" rel="tooltip" title="Remove section" data-placement="left" href="javascript:;"><b><i class="fa fa-times fa-2x"></i></b></a>
</div>
<div id="allhtml"></div>
</body>
使用jQuery清除html -
$('#btn_save').click(function () {
var notAll = $('body').children().not("#menu", ".removable-section", "#edit-save-section").html();
$('#allhtml').append(notAll);
console.log($('#allhtml').html());
});
不知何故,我设法删除了#menu
和.removable-section
,但我无法移除#edit-save-section
如果我尝试改变这些部分的顺序,如 -
var notAll = $('body').children().not("#menu","#edit-save-section",".removable-section").html();
然后它很奇怪。它不会从上面的html结构中找到的最后一个孩子从身体中删除。在这种情况下,它是.removable-section
。
让我知道我做错了什么?
答案 0 :(得分:1)
您也可以使用JQuery Clone来实现此目标
$('#btn_save').click(function () {
var notAll = $('body').clone(true);
notAll.find("#menu").remove();
notAll.find(".removable-section").remove();
notAll.find("#edit-save-section").remove();
$('#allhtml').append(notAll);
});