隐藏/删除 div 中的文本

Question

我有这个 div，如果满足条件，我需要删除某些部分。

我无权访问项目的 HTML 和 CSS 文件，因此我只能在这里使用 JavaScript。

例如，我想删除从“开始日期”到“开始时间”的所有内容

<div class="timer">
Starting date
<select>
  <option value="1"></option>
  <option value="2"></option>
</select>
Starting time
<select>
...

如何将 div 的全部内容从某个点删除到另一个点？

Answer 1

使节点列表静态化后的这项工作

 let hideDate = true; // your condition const startText = "Starting date", endText = "Starting time"; if (hideDate) { let i = 0; const nodes = [...document.querySelector(".timer").childNodes]; // make list static for (; i < nodes.length; i++) { if (nodes[i].nodeType === 3 && nodes[i].textContent.trim() === startText) break; } for (; i < nodes.length; i++) { if (nodes[i].nodeType === 3 && nodes[i].textContent.trim() === endText) break; nodes[i].remove(); } }

 <div class="timer"> Starting date <select> <option value="1"></option> <option value="2"></option> </select> Starting time <select> <option value="1"></option> <option value="2"></option> </select> </div>

Answer 2

我认为你可以做这样的事情：

例如，您必须从 javaScript 中选择此元素：

var elementsContainer = document.getElementsByClassName/TagNames('element class or element tag name');

这将返回一个元素列表，因此您需要获取其中一个，如下所示：

elementsContainer = elementsContainer[0]

这会给你一个元素，所以在这之后，你可以像这样删除它的内容

elementsContainer.innerHTML/innerText = '';

您可以根据需要选择此属性innerHTML或innerText之一

Answer 3

好为你的问题。 我建议看看jquery remove()和jquery empty() 。 这是这两种方法的一些工作测试演示。

<script>
$(document).ready(function(){
    $(".timer select").remove();
});
</script>

上面的代码将彻底删除div元素内的元素。 在这里看到Jquery 删除工作示例

<script>
$(document).ready(function(){
    $(".timer").empty();
});
</script>

此方法不仅删除子（和其他后代）元素，还删除匹配元素集中的任何文本Jquery Empty Working Example

与 .empty() 类似，.remove() 方法从 DOM 中取出元素。 当您想要删除元素本身以及其中的所有内容时，请使用 .remove() 。

如果你想用核心 javascript 来做，那么看看它。 使用核心 JS 的 Jquery Remove 方法

Answer 4

 let timer = document.querySelector('.timer') const from = 'Starting date' const to = 'Starting time' let html = timer.innerHTML timer.innerHTML = html.slice(0, html.search(from)) + html.slice(html.search(to))

 <div class="timer"> Starting date <select> <option value="1">1</option> <option value="2">2</option> </select> Starting time <select> <option value="1">1</option> <option value="2">2</option> </select> </div>