How to Remove Only the Parent Element and Not Its Child Elements in JavaScript

How to remove only the parent element and not its child elements in JavaScript?

Using jQuery you can do this:

var cnt = $(".remove-just-this").contents();
$(".remove-just-this").replaceWith(cnt);

Quick links to the documentation:

• contents( ) : jQuery
• replaceWith( content : [String | Element | jQuery] ) : jQuery

How can I remove wrapper (parent element) without removing the child?

Could use this API: http://api.jquery.com/unwrap/

Demo http://jsfiddle.net/7GrbM/

.unwrap

Code will look something on these lines:

Sample Code

$('.button').click(function(){
    $('.wrapper img').unwrap();
});

How can I remove a child element only if it exists under a parent?

As you're already including jQuery in the page you can simplify what you're doing by using it's pattern of not throwing any errors when dealing with undefined target elements.

In this case, use prependTo() to add the element where necessary, and then find() to retrieve it within the parent and remove() it. Note that jQuery's remove() method will not throw an error when called on an empty object.

const $tarif = $('<li class="tarif"><a href="#">Tarfis</a></li>');
const $social_header = $("#social-header");
const $menu = $("#menu");

$(window).resize(function() {
  if ($(this).width() > 800) {
    $tarif.prependTo($social_header);
    $menu.find('.tarif').remove();
  } else {
    $tarif.appendTo($menu);
    $social_header.find('.tarif').remove();
  }
});

That being said, I would strongly suggest you solve your goal using CSS instead of JS. Your current approach is brittle, as it can easily be broken by someone simply disabling JS in the browser, and also not a good separation of UI and JS code.

To do the same thing in CSS, place all HTML in the DOM when the page loads and organise your CSS in this manner:

#menu .tarif { display: none; }
#social-header .tarif  { display: block; }

@media screen and (min-width: 0px) and (max-width: 800px) {
  #menu .tarif { display: block; }
  #social-header .tarif  { display: none; }
}

How to remove parent element and keep its child elements without creating empty span

Use insertAfter to insert the children elements after your wrapping element to maintain the position. Then detach() or remove() the wrapper.

$('#fixit').on('click', function(e) {  var $highlight = $('.highlight');  var $children = $highlight.children();  $children.insertAfter($highlight);  $highlight.remove();  });

body > span { background-color: gold;}.highlight {   background-color: red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><span >I</span><span > </span><span class="highlight">  <span >l</span>  <span >i</span>  <span >v</span>  <span >e</span>  <span > </span></span><span >h</span><span >e</span><span >r</span><span >e</span><button id="fixit">Fix it</button>

Remove all child elements of a DOM node in JavaScript

In 2022+, use the replaceChildren() API!

Replacing all children can now be done with the (cross-browser supported) replaceChildren API:

container.replaceChildren(...arrayOfNewChildren);

This will do both:

• remove all existing children, and
• append all of the given new children, in one operation.

You can also use this same API to just remove existing children, without replacing them:

container.replaceChildren();

This is fully supported in Chrome/Edge 86+, Firefox 78+, and Safari 14+. It is fully specified behavior. This is likely to be faster than any other proposed method here, since the removal of old children and addition of new children is done without requiring innerHTML, and in one step instead of multiple.

remove only parent element not its childs in jquery

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.

Remove child div from parent div

If you want to remove all child div use querySelectorAll().

You also have 2 id attributes in your parent div you can only have one.

let childDivs = document.querySelectorAll("#social > div");
for(var i = 0; i < childDivs.length; i++){
  childDivs[i].remove();
}

<div class="col-md-4" id="social">
  <div class="footer-col" id="footer-col">
    <h4>Social Media</h4>
    <span class="fa-stack">
                            <a href="#your-link">
                                <i class="fas fa-circle fa-stack-2x"></i>
                                <i class="fab fa-facebook-f fa-stack-1x"></i>
                            </a>
                        </span>
    <span class="fa-stack">
                            <a href="#your-link">
                                <i class="fas fa-circle fa-stack-2x"></i>
                                <i class="fab fa-twitter fa-stack-1x"></i>
                            </a>
                        </span>
    <span class="fa-stack">
                            <a href="#your-link">
                                <i class="fas fa-circle fa-stack-2x"></i>
                                <i class="fab fa-google-plus-g fa-stack-1x"></i>
                            </a>
                        </span>
    <span class="fa-stack">
                            <a href="#your-link">
                                <i class="fas fa-circle fa-stack-2x"></i>
                                <i class="fab fa-instagram fa-stack-1x"></i>
                            </a>
                        </span>
    <span class="fa-stack">
                            <a href="#your-link">
                                <i class="fas fa-circle fa-stack-2x"></i>
                                <i class="fab fa-linkedin-in fa-stack-1x"></i>
                            </a>
                        </span>
  </div>
</div>

How can I remove an element but keep its children?

I would do something like:

$a = $("a")
$a.replaceWith($a.children());

remove parent element but keep the child element using jquery in HTML

You can use replaceWith()

$('.row').replaceWith(function() {
 return $('ul', this);
});

Working Demo

---

Related Topics