Problems removing parent () items with jquery

Navigation
4

Good morning, gentlemen, I'm having a problem just removing one of the elements.

I have a textarea that adds paragraphs, the problem is being at the time of deleting, I want btn to delete only the parent div from it and not from the others, as there may be several paragraphs they are added as class, and that's where it is the problem, when I click on the btn remove, it delete all elements with the class. I am using $ (this) and parent () but as I am new to jquery I must be missing something, so I ask the help of the companions! Thank you very much in advance! Hugs! 

 $("#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><divclass="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>
    
asked by anonymous 28.07.2015 / 15:02

2 answers

4

What I did was just change the snippet of code where you execute remove ().

I hope I have helped. 

 $("#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><divclass="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
    
28.07.2015 / 15:23
4

Use the closest method. It takes exactly the parent of the button that contains this class.

Do this: 

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

});
    
28.07.2015 / 15:19
How to list all remote repositories in Git? Database modeling