Em jQuery seria isto:
$("[class=3]").remove();
$("#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>
Em JavaScript seria isto:
var el = document.querySelector("[class=3]");
var pa = el.parentNode;
if (pa) {
pa.removeChild(el);
}
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>
Nota
O uso de numeros em classe da maneira que fez não é reconhecido e provavelmente é errado, por exemplo se tentar um seletor assim querySelector('.3')
vai causar este erro:
Uncaught SyntaxError: Failed to execute 'querySelector' on 'Document': '.3' is not a valid selector.
Então recomendo trocar class
pelo atributo data-
, algo como:
<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>
E e usar no seletor $("[data-index=3]")
e 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>