Delete dynamic table row via button in dialog box

Question

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>

Answer 1

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>