Удаление обычного HTML-текста в div

Как я могу удалить 'Currently' в HTML без удаления других текстов

<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>

Вы можете использовать regexp и 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>

Вы можете использовать DOM в своих интересах. Если у вас есть ссылка на родителя Div, вы можете использовать свойство childNodes (https://www.w3schools.com/jsref/prop_node_childNodes.asp) этого родителя. Оно возвращает только элементы HTML, но не текстовые узлы. Вы можете написать довольно простую функцию, которая перебирает все childNodes для восстановления innerHTML и, как побочный эффект, оставляет текстовые узлы.

Если вы хотите удалить определенные текстовые узлы, вы можете использовать свойство children (https://www.w3schools.com/jsref/prop_element_children.asp), которое включает как текстовые узлы, так и html-элементы. Тогда вы все равно перебираете дочерние элементы и просто добавляете логику, чтобы решить, добавлять ли их обратно в innerHTML.

Вернуться на верх