CODEWITHSUNDEEP
javascriptjqueryhtml
chriz
chriz

Reputation: 1345

remove only parent element not its childs in jquery

i want to get the inner html of one division,and i want to remove particular elements from that html, have a look at following html

<div id='mainDiv'>
  <p>dont remove me</p>
  <span id='removeSpan'>Remove Me</span>
  <div id='removeDiv'>
    <p>don't remove me</p>
  </div>
  <p>dont remove me</p>
</div>

from the above html i want to get innerHTML of mainDiv andi want to remove removeSpan and removeDiv and i dnt want to remove childs of remove div what i am doing so far is..

var fullHtml = $('mainDiv').html();
var filterHtml= fullHtml .replace('<span id='removeSpan'>Remove Me</span>','');

this working for this element bcoz i dont want childs of this element
but how ican remove only removeDiv [only it's opening and closing tags not childs]
the final result should be following

 <p>dont remove me</p>
 <p>dont remove me</p>
 <p>dont remove me</p>

thank for immediate responds..
bt here i dont want to change my application screen[html]. i just want to collect that innerHtml(of course after removing like i said) to a variable as a string. can i make this.. sorry for trouble!

Upvotes: 0

Views: 1554

Answers (2)

adeneo
adeneo

Reputation: 318342

$('#mainDiv').parent().append($('#mainDiv p')).end().remove();

FIDDLE

or

$('#mainDiv p').unwrap().siblings('#removeSpan').remove();

FIDDLE

This one also keeps data and events, and could also be written

$('#removeSpan').remove();
$('#mainDiv p').unwrap();

EDIT:

If you just want the HTML of the P tags in a variable

var html = $.map($('#mainDiv p'), function(e) { return e.outerHTML }).join('');

or just the paragraphs

var p = $('#mainDiv').find('p');

or a clone of the paragraphs

var p = $('#mainDiv').clone(true).find('p');

Upvotes: 3

robbclarke
robbclarke

Reputation: 749

Based on what you've written... a combination of .unwrap() and .remove() will do the trick.

<script type="text/javascript">
// <![CDATA[
(function($){
    $(document).ready(function(){
        $('TRIGGER').on('click', function(){
            $('#removeDiv p').unwrap();
            $('#removeSpan').remove();
        });
    });
})(jQuery);
// ]]>
</script>

.unwrap() will remove the parent from an element while .remove() removes that particular element.

Upvotes: 1

Related Questions