Jquery – Remove only text content from a div

by

This should do the trick:

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

Or using an ES6 arrow function:

$('#YourDivId').contents().filter((_, el) => el.nodeType === 3).remove();

If you want to make your code more readable and you only need to support IE9+, you can use the node type constants. Personally, I’d also split the filter function out and name it, for reuse and even better readability:

let isTextNode = (_, el) => el.nodeType === Node.TEXT_NODE;

$('#YourDivId').contents().filter(isTextNode).remove();

Here’s a snippet with all the examples:

$('#container1').contents().filter(function() {
  return this.nodeType === Node.TEXT_NODE;
}).remove();

$('#container2').contents().filter((_, el) => el.nodeType === Node.TEXT_NODE).remove();

let isTextNode = (_, el) => el.nodeType === Node.TEXT_NODE;

$('#container3').contents().filter(isTextNode).remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container1">
  <h1>This shouldn't be removed.</h1>
  This text should be removed.
  <p>This shouldn't be removed either.</p>
  This text should also be removed.
</div>

<div id="container2">
  <h1>This shouldn't be removed.</h1>
  This text should be removed.
  <p>This shouldn't be removed either.</p>
  This text should also be removed.
</div>

<div id="container3">
  <h1>This shouldn't be removed.</h1>
  This text should be removed.
  <p>This shouldn't be removed either.</p>
  This text should also be removed.
</div>

More Related Contents:

  1. How to break out of jQuery each loop?
  2. How can I recognize touch events using jQuery in Safari for iPad? Is it possible?
  3. How to access the content of an iframe with jQuery?
  4. Hide options in a select list using jQuery
  5. IE9 jQuery AJAX with CORS returns “Access is denied”
  6. Google Chart draw Trendlines with date on x axis
  7. jQuery Validate array input element which is created dynamically
  8. Detect image load
  9. jQuery counter to count up to a target number
  10. How to check if an option is selected?
  11. jQuery: Load Modal Dialog Contents via Ajax
  12. Changing .prop using jQuery does not trigger .change event
  13. jQuery If DIV Doesn’t Have Class “x”
  14. Leaflet – How to find existing markers, and delete markers?
  15. Jquery checking success of ajax post
  16. jQuery selector for the label of a checkbox
  17. How do I PUT data to Rails using JQuery
  18. Iterating over element attributes with jQuery
  19. Passing dynamic json object to C# MVC controller
  20. Ajax Not working in IOS 9.0 Cordova
  21. Placing error message for a checkbox array
  22. How does jQuery .data() work?
  23. jQuery select box validation
  24. Highlight dates in specific range with jQuery’s datepicker
  25. jQuery Validation with multi-part form
  26. How to use Twitter Bootstrap popovers for jQuery validation notifications?
  27. Rails 3 UJS – controller gets called twice by link_to :remote
  28. jQuery trigger custom event synchronously?
  29. access div in iframe parent
  30. How to prevent jump on an anchor click?

Leave a Comment