隐藏/删除 div 中的文本

Question

I have this div and I need to remove certain parts if a condition is fulfilled.

I don't have access to the HTML and CSS files of the project, so I can only work with JavaScript here.

For example I want to delete everything from "Starting date" to "Starting time"

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

How can I remove the entire content of the div from a certain point to another certain point?

Answer 1

This work after making the nodelist static

 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

i think you can do something like this:

you have to select this element from javaScript for example:

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

this will return you a list of elements, so you need to get one of them, like this:

elementsContainer = elementsContainer[0]

this will give you one element, so after this, you can delete its content like this

elementsContainer.innerHTML/innerText = '';

you can choose one of this property innerHTML or innerText according to which you need

Answer 3

Well for your problem. I would suggest to have a look at the concepts of jquery remove() , and jquery empty() . here are some working test demos of these two methods.

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

The above code will completely remove the elements inside the div element. see here Jquery Remove Wroking Example

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

This method removes not only child (and other descendant) elements, but also any text within the set of matched elements Jquery Empty Working Example

Similar to .empty(), the .remove() method takes elements out of the DOM. Use .remove() when you want to remove the element itself, as well as everything inside it.

If you want to do it with core javascript then have a look at it. Jquery Remove method using core JS

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>