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

Question

can I remove with jQuery only the text in a node but not the children elements ?

thanks

See also:[How do I select text nodes with jQuery](https://stackoverflow.com/questions/298750/how-do-i-select-text-nodes-with-jquery) — freedomn-m, Oct 21 '22 at 14:12

score 64 · Answer 1 · answered Jul 25 '13 at 07:58

64

Best and easy solution to remove all text elements from certain div is

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

answered Jul 25 '13 at 07:58

Nitin Varpe

10,450
6
36
60

1

Nitin, bro could you explain it a little please? – Rahul Mar 14 '18 at 17:51
1

Works for me too. You deserved the nobel prize :) – SteffPoint Feb 19 '19 at 12:38
If you need to replace the text, replace `remove()` with `replaceWith("new text")` – Jack Miller Jan 16 '20 at 06:54
Nice - Worked for me too – Nick Feb 14 '20 at 15:01
I have found the solution here even I was searching for a bit different thing - this idea is also good to keep only the element text removing all the inner html tags: $(node).find('.export:first-child').contents().filter(function(){ return (this.nodeType == 3); }).text().trim() – Vladimir T Feb 26 '20 at 07:06

Nan1488 · Answer 2 · 2012-11-27T23:00:26.740

8

This works for me:

$(elem).html($(elem).html().replace($(elem).text(),''));

This set the html content without the text content, it means that any html tag inside of elem will be keep without changes.

before:

<div>Hello<input type="text" name="username" value="world!"/></div>

after:

<div><input type="text" name="username" value="world!"/></div>

bye

edited Nov 27 '12 at 23:00

answered Nov 21 '12 at 22:01

Nan1488

179
2
6

2

Please add some explanation. – Paul R Nov 21 '12 at 22:20
2

There are a few problems with this: 1) editing HTML with string functions like replace can break the markup (eg. if the text is ' ' or '"'), 2) anything matching the text is replaced (eg. if the text is 'user' then the name attribute will change), 3) If the text is spread out between children it won't work (eg. "
Hello
World
") – Warbo Jun 20 '14 at 12:51

Rudism · Accepted Answer · 2018-10-04T21:41:54.443

7

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);
}

edited Oct 04 '18 at 21:41

answered Apr 26 '10 at 20:58

Rudism

1,585
10
13

3

function stripText(element) { var item = element[0]; var newElement = $('<' + item.nodeName + '/>'); for (i=0; i – Mandrake May 31 '12 at 21:01
+1 Mandrake's solution resolves the issue of the element's attributes being removed. – Chris O'Kelly Apr 10 '13 at 01:16

score -1 · Answer 4 · answered Sep 19 '18 at 08:04

-1

It's easier for me to set a class for them all, in HTML and use empty() method in jQuery.

answered Sep 19 '18 at 08:04

Rohullah Abdullahpour

39
3

OP was asking about text nodes. You can't add classes to text nodes – Gust van de Wal Oct 02 '18 at 04:53

score -6 · Answer 5 · answered Apr 26 '10 at 16:45

-6

you cannot do that.Unless it is wrapped by an element.

answered Apr 26 '10 at 16:45

ozsenegal

4,055
12
49
64

score -11 · Answer 6 · answered Apr 26 '10 at 16:41

-11

$('#someElement').text('');

answered Apr 26 '10 at 16:41

Darin Dimitrov

1,023,142
271
3,287
2,928

1

are u sure ? it removes also the children. Maybe because I use jquery 1.2.3 – aneuryzm Apr 26 '10 at 19:46
1

this removes all the children in 1.4.2 as well – Rudism Apr 26 '10 at 20:52
Rudism is correct. It removes everything within the element including the children. – Davis Oct 02 '13 at 15:55

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

6 Answers6

Linked

Related