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

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

Пример:

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

Как очистить содержимое всех дочерних элементов <div>внутри мастера, <div>используя jQuery?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

я и группа jQuery не рекомендуем использовать SET FUNCTION, например .html () .attr () .text (), что это? это если вы хотите установить все, что вам нужно

ссылка: https://learn.jquery.com/using-jquery-core/manipulation-elements/

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

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

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

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

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

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

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

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

или

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

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

или

$('.div_class').empty();

Работает нормально, чтобы удалить содержимое внутри div

Вы можете использовать функцию .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/

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

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

$("#masterdiv div[id^='childdiv']").each(function(el){$(el).empty();});

или

$("#masterdiv").find("div[id^='childdiv']").each(function(el){$(el).empty();});

Я знаю, что это jQueryсвязанный вопрос, но я верю, что кто-то может прийти сюда в ожидании чистого Javascriptрешения. Итак, если вы пытаетесь сделать это с помощью js, вы можете использовать innerHTMLсвойство и установить его в пустую строку.

document.getElementById('masterdiv').innerHTML = '';

попробуйте их, если это поможет.

$('.div_parent .div_child').empty();

$('#div_parent #div_child').empty();