How to Remove Text (Without Removing Inner Elements) from a Parent Element Using Jquery

How to remove text (without removing inner elements) from a parent element using jquery

If you want to remove all child text nodes you can use .contents() and then .filter() to reduce the matched set to only text nodes:

$("#foo").contents().filter(function () {
     return this.nodeType === 3; 
}).remove();​​​​​​​

Here's a working example.

Note: This will preserve any existing event handlers on the child elements, which answers using .html() will not do (since the elements are removed from the DOM and added back in).

Note 2: Answers in some of the linked questions show similar code to that in my answer here, but they use the nodeType constants (e.g. return this.nodeType === Node.TEXT_NODE). This is bad practice since IE below version 9 does not implement the Node property. It's safer to use the integers (which can be found in the DOM level 2 spec).

How do you remove text without affecting child elements?

Whit Javascript you can just get all the childNodes of the element with id=parent and then traverse these childs to .remove() those that have nodeType equal to Node.TEXT_NODE:

let childs = document.getElementById("parent").childNodes;childs.forEach(c => c.nodeType === Node.TEXT_NODE && c.remove());

<div id="parent">  <div>keep this</div>  <div>keep this</div>  Some random text that can't be predicted (to be removed)  <div>keep this</div></div>

jQuery: how to remove the text but not the children elements

Here's my idea:

function removeText(element){
  var newElement = $('<' + element[0].nodeName + '/>');
  for(i=0; i < item.attributes.length; i++) {
    newElement.attr(item.attributes[i].name, item.attributes[i].value);
  } 
  element.children().each(function(){
    newElement.append(this);
  });
  element.replaceWith(newElement);
}

Remove element and insert its text into parent element in the same place with jQuery

Instead of removing the original <span> in its entirety, you can use contents() and unwrap() to strip the opening and closing tags.

Using this method, the $.each and if are unnecessary.

$('.SomeClass > .SomeClass').contents().unwrap();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="SomeClass">  Some  <span class="SomeClass">    Copied  </span>  Text</span>
<br><br>
<span class="SomeClass">  Another  <span class="SomeClass">    Copied  </span>  Text</span>

Remove text from label but keep text in span within it

You can filter your div by nodeType. This code should work.

$(function() {  $('.checkbox').contents().filter(function() {    return this.nodeType === 3;  }).remove();});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="wc_checkout_add_ons_2_yes" class="checkbox ">Yes (  <span class="woocommerce-Price-amount amount">  <span class="woocommerce-Price-currencySymbol">€</span>  4.95</span>)</label>

Jquery - How to remove parent element if child element is without text?

You can use :empty selector to select the empty b element as well as .closest() to get the closest ancestor li and remove it:

$('b:empty').closest('li').remove();

How to remove only the parent element and not its child elements in JavaScript?

Using jQuery you can do this:

var cnt = $(".remove-just-this").contents();
$(".remove-just-this").replaceWith(cnt);

Quick links to the documentation:

• contents( ) : jQuery
• replaceWith( content : [String | Element | jQuery] ) : jQuery

---

Related Topics