Problems to remove Parent() items with jquery

Asked

Viewed 318 times

4

Good morning gentlemen, I’m having a certain problem removing just 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 his father div and not the others, as there can be several paragraphs they are added as class, and that’s where the problem is, when I click on btn remove, it exclude all elements with the class. I’m using $(this) and Parent() but since I’m new with jquery I must be missing something, so I ask for the help of the companions! I thank you already! Hug!

 $("#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>

jquery jquery-ui jquery-mobile

2 answers

4

Use the method closest. He takes exactly the father of the button that contains this class.

Do so:

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

});

4


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

I hope I’ve 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>
<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

  • Although your answer may be correct, it would be interesting to at least give an explanation of how you did to get the desired result

  • Hello Marcelo, forgive my failure, is that I’m new here and I’m learning to use the tool, when I answered I used the button "Copy code snippet for the answer", from then on I just modified what I wanted and was afraid to add the explanation in the middle of the code and it did not execute.

  • What I did was change the code snippet $(this). Parent(). Parent(). find('.dashboard-paragraph'). remove();

  • For $(this). Parent(). remove();

  • @Abidias welcome to Sopt, just click the button edit just below your reply and add these details. You can add the information before the tags <!-- begin snippet, can also add as comments in codes // realizei tal alteração just below the edit box has the preview of the answer/question. I suggest you make a tour to know more the site.

  • Thank you Kaduamaral for the clarifications, I will follow your guidelines.

Show 1 more comment

Browser other questions tagged jquery jquery-ui jquery-mobile

You are not signed in. Login or sign up in order to post.