-1

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

2 Respostas 2

0

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

1
  • 1
    Já deu uma luz aqui e consegui usar com jQuery. Vlw!
    – bur
    Commented 1/03/2019 às 1:12
0

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>

Com JavaScript puro

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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .