Delete dynamic table row via button in dialog box

Asked

Viewed 1,265 times

2

As I delete a row from a dynamic table through a confirmation dialog box (modal)?

So far I can delete only by directly using the delete button from the row itself in the table, but I wish there was a modal with a confirmation, before deleting it.

In the table comes a remove button then I click on it and opens a dialog asking:

" Are you sure you want to delete? Yes Not"

The problem is that I’m not getting to delete through this button Yes, only works when I click on the "remove" icon right in the table.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<table id="lista-tarefas" class="table table-bordered table-striped">
   <thead class="bg-header-tb">
      <th class="text-center text-uppercase">Nome</th>
      <th class="text-center text-uppercase">Tipo</th>
      <th class="text-center text-uppercase">Ação</th>
   </thead>
   <tbody>
      <tr>
         <td>Tarefa 1</td>
         <td>Perguntas e Respostas</td>
         <td class="text-center">
            <p data-placement="top" data-toggle="tooltip" title="Editar" class="acoes-btn">
               <button class="btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" data-target="#edit" >
               <span class="glyphicon glyphicon-pencil"></span>
               </button>
            </p>
            <p data-placement="top" data-toggle="tooltip" title="Excluir" class="acoes-btn">
               <button class="btn btn-danger btn-xs" data-title="Delete" data-toggle="modal" data-target="#delete">
               <span class="glyphicon glyphicon-trash"></span></button>
            </p>
         </td>
      </tr>
   </tbody>
</table>

<!--caixa de dialogo-->
<div class="modal fade" id="delete" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
            <h4 class="modal-title custom_align" id="Heading">Excluir tarefa</h4>
         </div>
         <div class="modal-body">
            <div class="alert alert-danger"><span class="glyphicon glyphicon-warning-sign"></span> Tem certeza que deseja excluir a tarefa?</div>
         </div>
         <div class="modal-footer ">
            <button type="button" class="btn btn-primary" data-dismiss="modal"><span class="glyphicon glyphicon-ok-sign"></span> Sim</button>
            <button type="button" class="btn btn-primary" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Não</button>
         </div>
      </div>
      <!-- /.modal-content --> 
   </div>
   <!-- /.modal-dialog --> 
</div>

javascript jquery html twitter-bootstrap

  • Hello Isabella Meirelles, can you tell exactly how this exclusion occurs?

  • Hello @Leocaracciolo I will click on the delete icon in the table and will open a dialog box asking if I want to delete, then pressing on yes the row of the table I selected will be deleted, I can not do through the dialog box, only direct by the icon of the table

1 answer

2


For that you have to add one Trigger to the button YES of the modal that will launch the function to eliminate what you want, which in this case will be the line (td) entire table.

I would also recommend adding a container/wrapper throughout this piece of code to point more precisely to the desired element without affecting others that by coincidence may have the same names of classes or elements etc...

Editing:

Event click modified and prepared to handle new elements added dynamically. Online example in jsFiddle: https://jsfiddle.net/shuffledPixels/j6u8p9jo/

Here is an example below:

var $thatRow;

// Quando ocorre um click em uma linha da tabela tr,
// salva essa linha como uma variável global para poder ser usada como ponto de referência onde o click ocorreu
$(document).on('click', '#lista-tarefas tbody tr', function(){
    $thatRow = $(this);
});

// Aponta para a nova class adicionada ao botão "SIM" do modal
$('#li-content-wrapper .excluir-trigger').on('click', function(){
    alert('Linha da tabela removida com sucesso!');
    // Aqui remove a linha referida
    $thatRow.hide(); // ou usando remove() do jQuery dependendo do que queira
});
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div id="li-content-wrapper">
    <table id="lista-tarefas" class="table table-bordered table-striped">
        <thead class="bg-header-tb">
            <th class="text-center text-uppercase">Nome</th>
            <th class="text-center text-uppercase">Tipo</th>
            <th class="text-center text-uppercase">Ação</th>
        </thead>
        <tbody>
            <tr>
                <td>Tarefa 1</td>
                <td>Perguntas e Respostas</td>
                <td class="text-center">
                    <p data-placement="top" data-toggle="tooltip" title="Editar" class="acoes-btn">
                        <button class="btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" data-target="#edit" >
                            <span class="glyphicon glyphicon-pencil"></span>
                        </button>
                    </p>
                    <p data-placement="top" data-toggle="tooltip" title="Excluir" class="acoes-btn">
                        <button class="btn btn-danger btn-xs" data-title="Delete" data-toggle="modal" data-target="#delete">
                            <span class="glyphicon glyphicon-trash"></span>
                        </button>
                    </p>
                </td>
            </tr>
            <tr>
                <td>Tarefa 1</td>
                <td>Perguntas e Respostas</td>
                <td class="text-center">
                    <p data-placement="top" data-toggle="tooltip" title="Editar" class="acoes-btn">
                        <button class="btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" data-target="#edit" >
                            <span class="glyphicon glyphicon-pencil"></span>
                        </button>
                    </p>
                    <p data-placement="top" data-toggle="tooltip" title="Excluir" class="acoes-btn">
                        <button class="btn btn-danger btn-xs" data-title="Delete" data-toggle="modal" data-target="#delete">
                            <span class="glyphicon glyphicon-trash"></span>
                        </button>
                    </p>
                </td>
            </tr>
        </tbody>
    </table>

    <!--caixa de dialogo-->
    <div class="modal fade" id="delete" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                    </button>
                    <h4 class="modal-title custom_align" id="Heading">Excluir tarefa</h4>
                </div>
                <div class="modal-body">
                    <div class="alert alert-danger"><span class="glyphicon glyphicon-warning-sign"></span> Tem certeza que deseja excluir a tarefa?</div>
                </div>
                <div class="modal-footer ">
                    <!-- AQUI ADICIONA A NOVA CLASS ".excluir-trigger" (Trigger) AO BOTÃO "SIM" -->
                    <button type="button" class="btn btn-primary excluir-trigger" data-dismiss="modal"><span class="glyphicon glyphicon-ok-sign"></span> Sim</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Não</button>
                </div>
            </div>
            <!-- /.modal-content --> 
        </div>
        <!-- /.modal-dialog --> 
    </div>
    ExecutarCopiar para uma nova respostaEsconder resultado
</div>

  • @Chun tested and worked but he’s deleting all the items gives table, know what can be?

  • I’ve already edited my reply @Isabellameirelles hope I’ve helped :)

  • @Chun I will apply the solution today and give you the feedback, thank you!!!!!!!!

  • @Chun worked perfectly in those that are added directly in html but dynamics does not delete and does not burst error, imagine what might be?

  • @Chun when I delete directly in the trash icon of the table it can delete the added ones dynamically(this in my previous code) but by the dialog box when I add a new row it does not delete and does not pop error :/

  • @Chun is adding the new line like this: https://jsfiddle.net/jgmoLnov/

  • 1

    I already made the change in my reply @Isabellameirelles . Now it is working correctly. Online example: https://jsfiddle.net/shuffledPixels/j6u8p9jo/

  • @Chun thank you!!!

Show 3 more comments

Browser other questions tagged javascript jquery html twitter-bootstrap

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