我有HTML代码,我想从HTML中删除一些具有特定类及其内容的div。 我有内容动态。所以我不能直接使用删除功能。我在一个变量中得到了这个HTML。我该如何搜索和删除它。
例如如下:
<div class="copyClipboard" style="float: left;padding-bottom: 20px;text-align: center;width: 100%;">
<button id="target-to-copy" data-clipboard-target="clipboard-text">
Click To Copy
</button>
</div>
<div class="modal fade imageModal" id="imageModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">CTRL + C for Copy</h4>
</div>
<div class="modal-body">
<textarea name="forCopy" id="clipboard-text" rows="15" cols="50"></textarea>
</div>
</div>
</div>
</div>
现在我想删除包含类名称模式和整个内容的Div。
请帮我删除。
答案 0 :(得分:0)
对于动态内容,您可以使用.on
功能,例如
$(document).on('event', 'selector', function(){
$('.modal').remove();
});
所以说,例如事件是单击按钮然后 -
$(document).on('click', 'button', function(){
$('.modal').remove();
});
答案 1 :(得分:0)
//如果是动态内容,请在按钮点击或其他事件中删除
$(".close").click(function(){
$('.modal').remove();
});
//如果要在div中清空内容,请使用此
$(".close").click(function(){
$('.modal div').empty();
});
答案 2 :(得分:-1)
试试这个:按照Arun的建议。 .remove()
将删除所选元素及其所有子元素。
$('.modal').remove();
<强> API Document for remove() 强>
编辑 - 如果您在变量中获取html,则可以使用.not()
然后append()
使用父div。让我们说父div有class="parentDiv"
var htmlCode = '<div class="copyClipboard" style="float: left;padding-bottom: 20px;text-align: center;width: 100%;">
<button id="target-to-copy" data-clipboard-target="clipboard-text">
Click To Copy
</button>
</div>
<div class="modal fade imageModal" id="imageModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">CTRL + C for Copy</h4>
</div>
<div class="modal-body">
<textarea name="forCopy" id="clipboard-text" rows="15" cols="50"></textarea>
</div>
</div>
</div>
</div>';
$('div.parentDiv').append($(htmlCode).not('.modal'));
<强> JSFiddle Link 强>