Question

我的javascript html字符串是：

<div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <div id="header"></div>
    <div id="innercontent">
        <div>this should be removed</div>
    </div>
    <div id="footer"></div>
</div>

我想要的结果是：

<div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <div id="asd"></div>
    <div id="innercontent">
    </div>
    <div id="footer"></div>
</div>

我尝试了几种我在SO上找到的方法，但所有方法也被删除了#innercontent element：

console.log($('#innercontent', content).remove().end().html());

我尝试：

console.log($('#innercontent', content).children().remove().end().html());

但这并没有给我预期的结果。它返回空字符串。

我需要单独使用字符串#innercontent html和html而不使用#innercontent内容。怎么样？我可以使用$('#innercontent', content).html()获取#innercontent内容，但是如何从整个内容中删除此html？

我也尝试使用string.replace，但它不起作用（不替换任何东西）：

content = content.replace($('#innercontent', content).html(), "");

编辑：

我的内容对象是我的javascript html字符串。

已编辑2 显然我应该写我在DOM（正文）或其他地方没有这个html。我从ajax得到它。空洞不是我想要的解决方案。我需要内部内容和内容字符串进行进一步操作，然后我将它们附加到不同父级的DOM中。

Answer 1

您可以使用empty()功能：

var remove = function() {
  $('#innercontent').empty();
}

$('#empty').click(function() {
  remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <div id="header"></div>
    <div id="innercontent">
        <div>this should be removed</div>
    </div>
    <div id="footer"></div>
</div>

<span id="empty" style="font-weight:bold;color:red;cursor:pointer">click to empty!</span>

Answer 2

您可以使用以下方法清除div的内容：

$('#innercontent').html('');

或使用：

$('#innercontent').empty();

对于性能差异，我建议您阅读以下内容：

What's the difference between jQuery.fn.empty() and jQuery.fn.html('')?

Answer 3

对于通过ajax

收到的HTML数据

要从使用ajax接收的数据中删除元素，请包装在$()中收到的html字符串，然后可以使用jQuery方法，就好像它在DOM中一样。

$.get('some/path/to/server/', function( data){
   /* create jQuery object with new html*/
   var $content = $(data);
   /* empty content section by traversing from outer root*/
   $content.find('#innercontent').empty();
   /* insert new content object in DOM*/
   $('#someDivInDOM').append( $content);
});

由于没有显示任何ajax我使用了快捷方式$.get。如果使用低级别$.ajax只在success或done回调中执行相同的任务

，则可打印的内容相同

的 WORKING DEMO

Answer 4

试试这个：

$('#innercontent').empty();

Answer 5

您可以调用空方法。

$('#innercontent').empty();

JSFIDDLE

Answer 6

使用jquery的.empty()方法删除所选元素的所有子项。

$('#innercontent').empty();

使用jquery的.html('')方法将innerHtml设置为空字符串。

$('#innercontent').html('');

两者都会在视觉上给你相同的结果。

jQuery从字符串中删除选择器内容

6 个答案: