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

by

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

More Related Contents:

  1. Adding The Anchor Text As The Title Dynamicaly
  2. Get all Attributes from a HTML element with Javascript/jQuery
  3. How to prevent a click on a ‘#’ link from jumping to top of page?
  4. Resize jqGrid when browser is resized?
  5. How do I refresh a page using JavaScript?
  6. One time page refresh after first page load
  7. How to get client IP address using jQuery
  8. Is there any cross-browser javascript for making vh and vw units work
  9. My javascript is returning this error: $.ajax is not a function
  10. Detect Close windows event by jQuery
  11. Retrieving file names out of a multi-file upload control with javascript
  12. jQuery change event on not firing in IE
  13. How to disable Chrome’s saved password prompt setting through JavaScript
  14. Input field for Tags separated by comma
  15. Only on Firefox “Loading failed for the with source”
  16. Check if parent window is iframe or not
  17. jQuery load content when scroll to bottom-100px of page, multiple events fired
  18. Using jQuery, how do you find only visible elements and leave hidden elements alone?
  19. Remove all attributes
  20. Clone a file input element in Javascript
  21. How to get the image size (height & width) using JavaScript
  22. submit event does not fire if submit initiated programmatically
  23. jQuery plugin DataTables: How to highlight the current search text?
  24. Add CSS rule via jQuery for future created elements
  25. jQuery continuous mousedown
  26. Jquery getJSON cross domain problems
  27. closure inside a for loop – callback with loop variable as parameter [duplicate]
  28. How can I include all JavaScript files in a directory via JavaScript file?
  29. Check which element has been clicked with jQuery
  30. does location of e.preventDefault() matter

Leave a Comment