Como um botão criado dinamicamente pode remover ele mesmo ao clicar sobre ele usando jQuery?
var id = 0;
function criar() {
$("#divina").append("<button id=botao" + id +">botao</button><br>");
id +=1;
};
Usando js puro fica mais ou menos assim:
var id = 0;
function criar() {
$("#divina").append("<button id='botao" + id +"' onclick='remove(\"botao"+id+"\")'>botao"+id+"</button><br>");
id +=1;
};
function remove(elementId){
var element = document.getElementById(elementId);
element.parentNode.removeChild(element);
}
Basta colocar um atributo onclick
chamando uma função e enviando o this
(o this
representa o próprio elemento, não precisa enviar o id
do botão):
$("#divina").append("<button onclick='removeBotao(this)' id=botao" + id +">botao</button><br>");
↑
É preciso também remover o <br>
após o botão. Se estiver usando jQuery 1.8 pra frente, use .addBack()
(versões anteriores a 1.8, use .andSelf()
):
// até a versão 1.8
function removeBotao(e){
$(e).next().andSelf().remove();
}
// versão 1.8+
function removeBotao(e){
$(e).next().addBack().remove();
}
Teste:
var id = 0;
function criar() {
$("#divina").append("<button onclick='removeBotao(this)' id=botao" + id +">botao</button><br>");
id +=1;
};
function removeBotao(e){
$(e).next().addBack().remove();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div id="divina"></div>
<button onClick="criar()">Criar</button>
Você pode usar o método .remove()
(não funciona no IE) ou .outerHTML
para remover o botão e selecionar o <br>
com .nextElementSibling
(elemento que vem após o botão):
var id = 0;
function criar() {
$("#divina").append("<button onclick='removeBotao(this)' id=botao" + id +">botao</button><br>");
id +=1;
};
function removeBotao(e){
e.nextElementSibling.outerHTML = '';
e.outerHTML = '';
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="divina"></div>
<button onClick="criar()">Criar</button>