Как удалить теги на странице?

09 октября 2021, 04:20

через код kod.js подгружаются данные на html страницу. Мне нужно по кнопке без перезагрузки страницы удалять скопившиеся данные, которые находятся между тегами <li></li> как это сделать?

<div id="result_strip">  
<ul class="thumbnails">
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
<ul class="collector"></ul>
</div>

Answer 1

Наверно будет проще отдельно собрать все li, стереть всё содержимое thumbnails и пихнуть элементы li обратно, чем разбираться, что там между ними оказалось.

let del = document.getElementById('js-delete'); 
let thumbnails = document.querySelector('.thumbnails'); 
 
del.addEventListener('click', function(){ 
  let li = document.querySelectorAll('.thumbnails li'); 
  thumbnails.innerHTML = ""; 
  Array.from(li).forEach( e => thumbnails.appendChild(e) ); 
});

<button id="js-delete">Удалить</button> 
<div id="result_strip"> 
  <ul class="thumbnails"> 
    <li>111</li> 
    скопившиеся данные... 
    <li>222</li> 
    которые между тегами... 
    <li>333</li> 
    <span>или тег...</span> 
  </ul> 
  <ul class="collector"></ul> 
</div>

Чуть менее требовательный к знаниям код:

var del = document.getElementById('js-delete'); 
var thumbnails = document.querySelector('.thumbnails'); 
 
del.addEventListener('click', function(){ 
  var li = document.querySelectorAll('.thumbnails li'); 
  thumbnails.innerHTML = ""; 
  for( var i = 0; i < li.length; i++ ){ 
    thumbnails.appendChild( li[i] ); 
  } 
});

<button id="js-delete">Удалить</button> 
<div id="result_strip"> 
  <ul class="thumbnails"> 
    <li>111</li> 
    скопившиеся данные... 
    <li>222</li> 
    которые между тегами... 
    <li>333</li> 
    <span>или тег...</span> 
  </ul> 
  <ul class="collector"></ul> 
</div>