Как очистить все содержимое <div>внутри родительского элемента <div>?

Question

У меня есть div <div id="masterdiv">, у которого есть несколько дочерних <div> s.

Пример:

<div id="masterdiv">
  <div id="childdiv1" />
  <div id="childdiv2" />
  <div id="childdiv3" />
</div>

Как очистить содержимое всех дочерних <div> внутри мастера <div> с помощью jQuery?

Answer 1

Функция jQuery empty() делает именно это:

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

очищает мастер div.

$('#masterdiv div').empty();

очищает все дочерние элементы div s, но оставляет мастера нетронутым.

Answer 2

jQuery('#masterdiv div').html('');

Answer 3

Используйте синтаксис селектора CSS jQuery, чтобы выбрать все элементы div внутри элемента с идентификатором masterdiv. Затем позвоните empty(), чтобы очистить содержимое.

$('#masterdiv div').empty();

Использование text('') или html('') вызовет некоторый анализ строки, что, как правило, является плохой идеей при работе с DOM. Попробуйте и по возможности используйте методы манипулирования DOM, которые не включают строковые представления объектов DOM.

Answer 4

Лучший способ:

 $( ".masterdiv" ).empty();

Answer 5

Если нужно очистить все div внутри этого masterdiv, вот это.

$('#masterdiv div').html('');

В противном случае вам нужно выполнить итерации для всех дочерних элементов div в #masterdiv и проверить, начинается ли идентификатор с childdiv.

$('#masterdiv div').each(
    function(element){
        if(element.attr('id').substr(0, 8) == "childdiv")
        {
            element.html('');
        }
    }
 );

Answer 6

jQuery рекомендует использовать ".empty ()", ". Remove ()", ". Detach ()"

если вам нужно удалить все элементы в элементе, используйте этот код:

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

если вам нужно удалить все элементы, используйте этот код:

$('#target_id').remove();

i и jQuery group не рекомендуются для использования SET FUNCTION вроде .html () .attr () .text (), что это? это ЕСЛИ ВЫ ХОТИТЕ УСТАНОВИТЬ ВСЕ, ЧТО ВАМ НУЖНО

ref: https://learn.jquery.com/using-jquery-core/manipulating-elements/

Answer 7

Вы можете использовать функцию .empty (), чтобы очистить все дочерние элементы

 $(document).ready(function () {
  $("#button").click(function () {
   //only the content inside of the element will be deleted
   $("#masterdiv").empty();
  });
 });

Чтобы увидеть сравнение между jquery .empty (), .hide (), .remove () и .detach (), следуйте здесь http://www.voidtricks.com/jquery-empty-hide-remove-detach/

Answer 8

$("#masterdiv > *").text("")

или

$("#masterdiv").children().text("")

Answer 9

$("#masterdiv div").text("");

Answer 10

Когда вы добавляете данные в div с помощью идентификатора, используя любую службу или базу данных, сначала попробуйте пусто, например:

var json = jsonParse(data.d);
$('#divname').empty();