Remove html elements from the dom

Question

I'm trying to figure out how to remove the dash and colon here using jQuery. Is there a way? So far, I've tried .empty and .remove but I couldn't get it to work, unfortunately.

<p class="meta">
     <strong>Author Name</strong>
     –                                <-- remove this
     <time>June 7, 2013</time>
     :                                <-- remove this
</p>

possible duplicate of [jQuery: how to remove the text but not the children elements](http://stackoverflow.com/questions/2715167/jquery-how-to-remove-the-text-but-not-the-children-elements) — jpgauthier, Jul 11 '14 at 06:24

score 2 · Accepted Answer · answered Jul 11 '14 at 06:12

2

You could use...

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

jsFiddle.

answered Jul 11 '14 at 06:12

alex

479,566
201
878
984

This is the correct answer. Only after posting my own answer, I saw yours. – Jose Rui Santos Jul 11 '14 at 06:25

score 1 · Answer 2 · answered Jul 11 '14 at 06:17

1

Try this :

$(function(){
   var $children = $('.meta').children();
   $('.meta').empty().append($children);
});

Demo

answered Jul 11 '14 at 06:17

Bhushan Kawadkar

28,279
5
35
57

score 0 · Answer 3 · edited May 23 '17 at 12:20

0

Try this,

$(function(){
   $('p.meta').html($('p.meta').find('*'));
});

Live Demo

Or try,

$(function(){
    $('p.meta').html(function(){ return $(this).find('*');});
});

Alternative

Updated, if there are events attached with your child element then use contents and filter like,

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

Demo

Refer How can I change an element's text without changing its child elements?

edited May 23 '17 at 12:20

Community

1
1

answered Jul 11 '14 at 06:14

Rohan Kumar

40,431
11
76
106

Problem if there are event listeners on those elements directly. – alex Jul 11 '14 at 06:16

score 0 · Answer 4 · answered Jul 11 '14 at 06:14

0

I would suggest to re-create your $(".meta") DOM node, so you got to extract strong and time, empty your $(".meta") and insert previously stored nodes.

answered Jul 11 '14 at 06:14

Aleksandr

2,185
2
21
29

score 0 · Answer 5 · answered Jul 11 '14 at 06:22

You need to use contents(), that returns all children (including text nodes). Then use remove() to remove those text nodes.

http://jsfiddle.net/Pv3qX/

$(".meta").contents().filter(function() {
     return this.nodeType == 3; // 3 for TEXT_NODE
}).remove()

score -1 · Answer 6 · answered Jul 11 '14 at 06:14

-1

Here is the solution: http://jsfiddle.net/E6GYs/

$(document).ready(function(){
    $(document).click(function(){
     $('.meta time').remove();
  })
    })

answered Jul 11 '14 at 06:14

Maxim Ershov

1,284
1
11
15

Remove html elements from the dom

6 Answers6