使用特定的Class从HTML中删除div

时间:2015-02-17 06:02:00

标签: javascript jquery html

我有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。

请帮我删除。

3 个答案:

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