Remove TAG with JavaScript

Question

Remove TAG with JavaScript

Navigation

#1 by (3 votes)
#2 by (3 votes)
#3 by (2 votes)

1

How do I remove an HTML tag using JavaScript?

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

I found remove () but it does not work in 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 the div 3? How do I do? Remove it from HTML, look like this:

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

javascript html jquery

asked by anonymous 12.05.2017 / 21:03

3 answers

3

In jQuery this would be:

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

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

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><buttonid="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 this would be:

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 class numbers in the way you did is not recognized and is probably wrong, for example if you try a selector so querySelector('.3') will cause this error:

Uncaught SyntaxError: Failed to execute 'querySelector' on 'Document': '.3' is not a valid selector.

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

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>

12.05.2017 / 21:07

2

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

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

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>

12.05.2017 / 21:09

Align image with text What is the difference of. for - in PHP?

score 3 · Accepted Answer

I usually use 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 response uses only JavaScript, without 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>