Remove TAG with Javascript

Asked

Viewed 5,502 times

1

How to remove an HTML tag using Javascript?

For example, with insertAfter(); and insertBefore(); I can insert some tags if I want. But if I want to delete from my code, some TAG? Not by display: None, I want to delete even.

I found remove() but it doesn’t work on all browsers.

Example

<div class="1">Div 1</div>
<div class="2">Div 2</div>
<div class="3">Div 3</div>
<div class="4">Div 4</div>

In case, if I wanted to delete div 3? How do I? Remove it from HTML, stay like this: 

<div class="1">Div 1</div>
<div class="2">Div 2</div>
<div class="4">Div 4</div>
javascript jquery html
  • 1

    Sorry, seriously you chose the answer you use children[...] instead of one that uses a selector? It’s okay that you want to work using Children neither will be necessary the class or any other attribute, just work by order, but just want to make sure you really understand the answers. It’s not a criticism, I was just confused even by your decision.

3 answers

4

In jQuery it would be this:

$("#remove").click(function () {

    $("[class='3']").remove();

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<button id="remove">Remover</button>

<div class="1">Div 1</div>
<div class="2">Div 2</div>
<div class="3">Div 3</div>
<div class="4">Div 4</div>

In Javascript would be this:

document.getElementById("remove").onclick = function () {

    var el = document.querySelector("[class='3']");
    var pa = el ? el.parentNode : null;

    if (pa) {
        pa.removeChild(el);
    }

};
<button id="remove">Remover</button>

<div class="1">Div 1</div>
<div class="2">Div 2</div>
<div class="3">Div 3</div>
<div class="4">Div 4</div>

Note

The use of numbers in class the way you did is not recognized and is probably wrong, for example if you try a selector like this querySelector('.3') will cause this mistake:

Uncaught Syntaxerror: Failed to execute 'querySelector' on 'Document': '.3' is not a Valid selector.

So I recommend changing class by attribute data- and use on selector $("[data-index=3]") and document.querySelector("[data-index=3]")

document.getElementById("remove").onclick = function () {

    var el = document.querySelector("[data-index='3']");
    var pa = el ? el.parentNode : null;

    if (pa) {
        pa.removeChild(el);
    }

};
<button id="remove">Remover</button>

<div data-index="1">Div 1</div>
<div data-index="2">Div 2</div>
<div data-index="3">Div 3</div>
<div data-index="4">Div 4</div>

3


I usually use the jQuery.remove, but there are actually reports of problems with older versions of IE.

Alternatively, you can use .removeChild in the parent element. (Remember that this answer uses Javascript only, no Jquery)

document.getElementById('btRemover').onclick = function () { 
 var pai = document.getElementById('pai');
 pai.removeChild(pai.children[2]);
}
<div id="pai">
<div class="1">Div 1</div>
<div class="2">Div 2</div>
<div class="3">Div 3</div>
<div class="4">Div 4</div>
</div>

<input type="button" id="btRemover" value="Remover Div 3"></input>

2

The native method for this is .removeChild() and must be called by the father of the element, because as you mentioned the .remove() is not supported by IE. It does exist in the jQuery API, if applicable.

You can also do "brute force" which is pai.innerHTML = '' and thus erase the contents of a given element (and all its offspring).

Example:

var btn = document.querySelector('button');
btn.addEventListener('click', function() {
  var pai = this.parentNode;
  pai.removeChild(this); // o "this" é o "btn" nesta callback
});
<button type="button">Clica-me para eu desaparecer!</button>

Browser other questions tagged javascript jquery html

You are not signed in. Login or sign up in order to post.