How can I remove the 'Currently' in the HTML withouting deleting other texts
<div class="group if-description-margin">
Currently: <--- Remove this text
<a href="/media/images/header-dots.png">images/header-dots.png</a>
<input type="checkbox" name="profile_picture-clear" id="profile_picture-clear_id">
<input type="file" name="profile_picture" accept="image/*" id="id_profile_picture">
<p> But don't remove this </p>
<label for="id_profile_picture">Profile Picture</label>
</div>
You can use the DOM to your advantage. If you have a reference to the parent Div, you can use the childNodes property (https://www.w3schools.com/jsref/prop_node_childNodes.asp) of it. It only returns the HTML elements, and not the text nodes. You could write a pretty simple function that loops through the childNodes to rebuild the innerHTML and by happy side-effect, it would leave out the text nodes.
If you want specific text nodes removed, you can use the children property (https://www.w3schools.com/jsref/prop_element_children.asp) which includes both the text nodes and the html elements. Then you still loop through the children and just add logic to decide if you add it back in to the innerHTML.
Edit: Adding a link to my test page... https://highdex.net/StackOverflow/DOMHelper.htm
Edit 2: further explanation I ended up using only the childNodes collection. And instead of clearing and rebuilding, I just removed text nodes (or text nodes that match the criteria). The second function has a lot more variable assignment than necessary, but I broke it up during debugging so I could more easily see values being used. It should be cleaned up, but won't hurt your understanding of it. One last thing to mention is that decrementing the counter in the for loop MUST be done that way. It avoids trying to access an index that might no longer exist if you try removing things from the beginning first.
You can use a regexp and the innerHTML:
const textContainer = document.querySelector('.group')
const btn = document.getElementById('remove')
const removeText = (el, regexp) => {
const oldHTML = el.innerHTML
const newHTML = oldHTML.replace(regexp, '')
return newHTML
}
const regexp = /Currently:/g
btn.addEventListener('click', function() {
textContainer.innerHTML = removeText(textContainer, regexp)
})
<div class="group if-description-margin">
Currently: <!-- Remove this text -->
<a href="/media/images/header-dots.png">images/header-dots.png</a>
<input type="checkbox" name="profile_picture-clear" id="profile_picture-clear_id">
<input type="file" name="profile_picture" accept="image/*" id="id_profile_picture">
<p> But don't remove this </p>
<label for="id_profile_picture">Profile Picture</label>
</div>
<button id="remove">REMOVE THE TEXT</button>