JQuery удалить содержимое селектора из строки

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 элемент:

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

стараюсь с:

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

, но это не дает мне ожидаемого результата. Он возвращает пустую строку.

Мне нужна отдельная строка #innercontent html и html без содержимого #innercontent. Как? Я могу получить контент #innercontent с $('#innercontent', content).html(), но как я могу удалить этот html из всего контента?

Я также попробовать с string.replace, но он не работает (ничего не заменит):

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

Редакция:

Моего объект контента является моим Javascript HTML строки.

EDITED 2 Очевидно, что я должен написать, что у меня нет этого HTML в DOM (тела) или где-нибудь еще. Я получаю это от ajax. Так пустое не решение, которое я ищу. Мне нужна внутренняя контента и строка содержимого для дальнейших манипуляций, а затем я добавляю их в DOM для разных родителей.

Answer 1

Для HTML данных, полученных с помощью AJAX

Для удаления элементов из данных, полученных с помощью 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); 
}); 

Поскольку ни Аякс не был показан в вопросе я использовал ярлык $.get. В princibles одинаковы при использовании низкого уровня $.ajax просто выполнять те же задачи в success или done обратного вызова

WORKING DEMO

Answer 2

Вы можете очистить содержимое DIV с помощью:

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

или используя:

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

Для различия bewteen их в исполнении я рекомендую вам прочитать следующее:

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

Answer 3

Вы можете использовать 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 4

Попробуйте это:

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

Answer 5

Вы можете назвать пустой метод.

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

JSFIDDLE

Answer 6

Используйте .empty() Метод JQuery для удаления всех детей выбранного элемента.

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

Используйте .html('') Метод JQuery, чтобы установить это innerHtml пустая строка.

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

Оба будут давать вам одинаковые результаты визуально.