4

Bom dia senhores, estou tendo um certo problema para remover apenas um dos elementos.

Tenho um textarea que adiciona parágrafos, o problema está sendo na hora de excluir, quero que o btn exclua apenas a div pai dele e não dos demais, como pode haver vários parágrafos eles são adicionados como class, e é aí que está o problema, quando clico no btn remover, ele excluir todos os elementos com a class. Estou usando $(this) e parent() mas como sou novo com jquery devo estar errando algo, por isso solicito a ajuda dos companheiros! Desde já agradeço! Abraço!

 $("#addParagrafo").click(function () {
            var conteudo = $('#adicionarConsideracoesGerais').val();
            $("#consideracoesGeraisParagrafos").append("<div class='painel-paragrafo'><textarea class='form-control paragrafoConsideracoesGerais' disabled rows='4'>" + conteudo + "</textarea><br><button type='button' class='btn btn-xs btn-default pull-right btn-remover' title='Remover este parágrafo'><i class='fa fa-minus'>Remov</i></button><br><br></div>");
            $('.painel-paragrafo').on('click', ".btn-remover", function () {
                $(this).parent().parent().find('.painel-paragrafo').remove();
                
            });
        });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12">
                                                    <div class="panel">
                                                        <div class="paragrafosConsideracoesGerais">
                                                            <ul id="consideracoesGeraisParagrafos">

                                                            </ul>
                                                            <textarea class="form-control" id="adicionarConsideracoesGerais"></textarea>
                                                            <div class="clearfix"></div><br>
                                                            <button class="btn btn-xs btn-default pull-right" type="button" title="Adicionar Parágrafo" id="addParagrafo"><i class="fa fa-plus">add</i></button>
                                                        </div>
                                                    </div>
                                                </div>

2 Respostas 2

4

O que fiz foi apenas alterar o trecho do código onde você executa o remove().

Espero ter ajudado.

 $("#addParagrafo").click(function () {
            var conteudo = $('#adicionarConsideracoesGerais').val();
            $("#consideracoesGeraisParagrafos").append("<div class='painel-paragrafo'><textarea class='form-control paragrafoConsideracoesGerais' disabled rows='4'>" + conteudo + "</textarea><br><button type='button' class='btn btn-xs btn-default pull-right btn-remover' title='Remover este parágrafo'><i class='fa fa-minus'>Remov</i></button><br><br></div>");
            $('.painel-paragrafo').on('click', ".btn-remover", function () {
                $(this).parent().remove();
                
            });
        });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12">
                                                    <div class="panel">
                                                        <div class="paragrafosConsideracoesGerais">
                                                            <ul id="consideracoesGeraisParagrafos">

                                                            </ul>
                                                            <textarea class="form-control" id="adicionarConsideracoesGerais"></textarea>
                                                            <div class="clearfix"></div><br>
                                                            <button class="btn btn-xs btn-default pull-right" type="button" title="Adicionar Parágrafo" id="addParagrafo"><i class="fa fa-plus">add</i></button>
                                                        </div>
                                                    </div>
                                                </div>

 - Relacionar o item

6
  • Apesar de sua resposta ser passível de estar correta, seria interessante ao menos você dar uma explicação de como fez pra obter o resultado desejado Commented 28/07/2015 às 13:25
  • Olá Marcelo, perdoe minha falha, é que sou novo aqui e estou aprendendo a utilizar a ferramenta, quando fui responder eu utilizei o botão "Copiar trecho de código para a resposta", a partir daí modifiquei só o que eu queria e fiquei com medo de adicionar a explicação no meio do código e ele não executar.
    – Abidias
    Commented 28/07/2015 às 13:31
  • O que fiz foi mudar o trecho de código $(this).parent().parent().find('.painel-paragrafo').remove();
    – Abidias
    Commented 28/07/2015 às 13:31
  • Para $(this).parent().remove();
    – Abidias
    Commented 28/07/2015 às 13:32
  • @Abidias seja bem vindo ao SOpt, basta clicar no botão editar logo abaixo da sua resposta e adicionar esses detalhes. Podes adicionar as informações antes das tags <!-- begin snippet, também pode adicionar como comentários nos códigos // realizei tal alteração logo abaixo da caixa de edição tem a pré-visualização da resposta/pergunta. Sugiro que faça um tour para conhecer mais o site.
    – KaduAmaral
    Commented 28/07/2015 às 13:38
4

Use o método closest. Ele pega exatamente o pai do botão que contenha essa classe.

Faça assim:

$(document).on('click', ".btn-remover", function () {
    $(this).closest('.painel-paragrafo').remove();

});

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 .