你好！我想一次性删除容器内的所有 div如果没有内部 div 的任何类或 id，我怎么能做到这一点？

编程问答 2022-05-17

问题描述

我创建了一个表单来搜索事物并将它们作为 div 添加到容器中。现在，对于每次新搜索，我都希望删除容器中的所有 div。我该怎么做？

const container = document.querySelector('.container');
const form = document.querySelector('#search-form');
form.addEventListener('submit',async function(e) {
  e.preventDefault();
  clear();
  const searchTerm = form.elements.query.value;

  const config = {
    params: {
      q: searchTerm
    }
  }
  const res = await axios.get(`http://api.tvmaze.com/search/shows`,config);
  displayShows(res.data);

  form.elements.query.value = '';
})

function clear() {
  for (div in container) {
    div.remove();
  }
}
<form id="search-form">
  <input type="text" placeholder="TV Show Title" name="query">
  <button id="search-btn">Search</button>
</form>

<div class="container">
  <div>Here is div-01</div>
  <div>Here is div-02</div>
  <div>Here is div-03</div>
</div>

解决方法

如果您想删除容器中的所有 div（假设您在运行 displayShows() 时再次生成它们中的每一个）：

代替 clear()，这样做：

container.innerHTML = ''

这将删除容器 div 中的所有内容，包括标签。

,

您可以使用下面的方法删除您的 div

  var e = document.getElementById("you_might_want_a_unique_id");
  var divs = e.querySelectorAll("div");
  for(var i=0;i < divs.length;i ++)
    e.removeChild(divs[i]);

只需向您的容器添加一个 id 属性（以防您有多个容器）

<div id="you_might_want_a_unique_id" class="container">
domhtmljavascriptparent-noderemovechildremovechild