How to Remove the Parent Element Using Plain JavaScript

How to remove the parent element using plain Javascript

Change your function like this:

function delete_row(e)
{
    e.parentNode.parentNode.parentNode.removeChild(e.parentNode.parentNode);
}

Remove parent element on click with plain javascript

You need to get the element reference from the event object(currentTarget/target)

Note: All the modern browser's have support for Node.remove()

var btn = document.getElementsByClassName('remove')
for (var i = 0; i < btn.length; i++) {  btn[i].addEventListener('click', function(e) {    e.currentTarget.parentNode.remove();    //this.closest('.single').remove() // in modern browsers in complex dom structure    //this.parentNode.remove(); //this refers to the current target element     //e.target.parentNode.parentNode.removeChild(e.target.parentNode);  }, false);}

<div class="single">  <img src="http://via.placeholder.com/150x150">  <button type="button" class="remove">X1</button></div><div class="single">  <img src="http://via.placeholder.com/150x150">  <button type="button" class="remove">X2</button></div><div class="single">  <img src="http://via.placeholder.com/150x150">  <button type="button" class="remove">X3</button></div><div class="single">  <img src="http://via.placeholder.com/150x150">  <button type="button" class="remove">X4</button></div>

vanilla js onclick remove parent element

have you tried this?

remove.addEventListener('click', (event) => {
 event.target.parentElement.remove();
}

Remove parent and child elements on span click with plain javascript

Thank you, mplungjan. Your answer helped me in the right direction.

Following is the code I ended up with which both neabled me to remove elements once applied and also while clicking 'remove' of elements that is not yet saved.

if(count( $coordinates ) > 0 ) {
   if(!empty($coordinates)){
       foreach( $coordinates as $coords ) {
          foreach( $coords as $coord ) {
            printf( 
                '<div>
                    Coordinate: <input type="text" name="coordinatesId[%1$s][title]" value="%2$s" /> 
                    Latitude & Longitude: <input type="text" name="coordinatesId[%1$s][coord]" value="%3$s" />
                        <button type="button" class="remove">%4$s</button></p>
                    </div>', 
                    $c, 
                    $coord['title'],   
                    $coord['coord'], 
                    __( ' Remove' ) );
                $c++;
            }
        }
    }    
}

?>
    
<span id="here"></span>

<button type="button" id="btn">Add new field</button>

Following is the Javascript which replaced jQuery.

<script>
        document.addEventListener('DOMContentLoaded', function() {
            
            console.log('DOM is ready!');

            const btn = document.getElementsByClassName('remove')

            for (var i = 0; i < btn.length; i++) {
                btn[i].addEventListener('click', function(e) {
                    
                    console.log("Removing existing field!");

                    e.currentTarget.parentNode.remove();

                }, false);
            }
        });

        window.addEventListener('load', function() {
            
            const here = document.getElementById('here'); 

            here.addEventListener('click', function(e) {
                const tgt = e.target;
                
                if (tgt.classList.contains('remove')) {
                    console.log("Removing existing field!");
                    
                    tgt.closest('div').remove();
                }

            });

            var count = <?php echo $c; ?>;

            document.getElementById('btn').addEventListener('click', function() {

                count = count + 1;

                console.log("Adding additional field number " + count + "!");

                here.innerHTML += `<div>Coordinate: <input type="text" name="coordinatesId[${count}][title]" value="" /> 
                    Latitude & Longitude: <input type="text" name="coordinatesId[${count}][coord]" value="" />
                    <button type="button" class="remove"> Remove</button></div>`;
            });
        });
    </script>

Thanks!

How to remove a parent node with all its children

You need to get a handle to the ul element then ask its parent element to delete it by passing the ul handle the parent's removeChild method.

This is how you would do it without the jQuery framework:

var x = document.getElementById('parent');
x.parentNode.removeChild(x);

Of course if you used jQuery it would be simple like this:

$("#parent").remove();

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();
});

Remove dom element without knowing its parent?

You should be able to get the parent of the element, then remove the element from that

function removeElement(el) {
el.parentNode.removeChild(el);
}

Update

You can set this as a new method on the HTMLElement:

HTMLElement.prototype.remove = function() { this.parentNode.removeChild(this); return this; }

And then do el.remove() (which will also return the element)

---

Related Topics