代码之家 › 专栏 › 技术社区 › the_darkside

清除div子元素而不从DOM中删除

dom jquery html javascript

the_darkside · 技术社区 · 4 年前

我的目标是,使用Jquery或vanilla JS清除 仅限内部文本 一个div及其每个子元素,同时在事件发生后保持所有元素的完整性。在下面的示例中,div是 student_profile .

因此,答案推荐了这些功能 .html('') 和 .text('') 但是,正如我下面的示例所示,这将完全从DOM中删除子元素(我的示例只显示了一个函数,但两个函数实际上都删除了该元素)。是否有一个函数可以删除当前div和子div中的所有文本,同时保持元素本身的完整性?

如果您有任何建议,我们将不胜感激!

function cleardiv() {


console.log(document.getElementById("student_name"));
$('#student_profile').html('');
console.log(document.getElementById("student_name"));

     }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='student_profile'>
  <h1 id="student_name">Foo Bar</h1>
  <p  id="student_id">123</p>
  <p  id="studen_course">math</p>
  <p  id="last_reported">2021-01-01</p>
</div>

<button onclick="cleardiv()">Clear</button>

3 回复 | 直到 4 年前

CertainPerformance 4 年前

一个选择是 select all text node descendants 和 .remove() 它们,使实际的元素完好无损:

const getTextDecendants = (parent) => {
  const walker = document.createTreeWalker(
    parent,
    NodeFilter.SHOW_TEXT,
    null,
    false
  );
  const nodes = [];
  let node;
  while (node = walker.nextNode()) {
    nodes.push(node);
  }
  return nodes;
}

function cleardiv() {
  for (const child of getTextDecendants($('#student_profile')[0])) {
    child.remove();
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='student_profile'>
  <h1 id="student_name">Foo Bar</h1>
  <p id="student_id">123</p>
  <p id="studen_course">math</p>
  <p id="last_reported">2021-01-01</p>
</div>

<button onclick="cleardiv()">Clear</button>

Mamun 4 年前

你可以试试选择器 #student_profile * 包含所有子元素。

function cleardiv() {
  console.log(document.getElementById("student_name"));
  $('#student_profile *').text('');
  console.log(document.getElementById("student_name"));
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='student_profile'>
  <h1 id="student_name">Foo Bar</h1>
  <p  id="student_id">123</p>
  <p  id="studen_course">math</p>
  <p  id="last_reported">2021-01-01</p>
</div>

<button onclick="cleardiv()">Clear</button>

pilchard 4 年前

如果你只想直接影响孩子,你可以重复 childNodes 父元素的。这将清除元素节点和文本节点等非元素节点。这里使用 NodeList#forEach() 返回的节点列表提供的方法。

function cleardiv() {
  document.getElementById('student_profile')
    .childNodes
    .forEach((node) => (node.textContent = ''));

  console.log(document.getElementById('student_name'));
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='student_profile'>
  <h1 id="student_name">Foo Bar</h1>
  <p  id="student_id">123</p>
  <p  id="studen_course">math</p>
  <p  id="last_reported">2021-01-01</p>
</div>

<button onclick="cleardiv()">Clear</button>