on click remove complete <tr>

Question

$(document).ready(function() {
  $('.delete').on('click', function() {
    confirm('Dialogue');
    if (confirm = true) {
      $(this).closest('tr').remove()
      alert('removed');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr role="row" class="odd">
      <td class="sorting_1">1</td>
      <td>HTML</td>
      <td>2016-07-07 10:57:53</td>
      <td>
        <ul class="list-inline actionlist">
          <li>
            <a href="http://localhost/uiprac/user/edit_languages/1" type="button">
              <button class="btn btn-success">Edit</button>
            </a>
          </li>
          <li>
            <button class="btn btn-danger delete" type="button">Delete</button>
          </li>
        </ul>
      </td>

    </tr>
    <tr role="row" class="even">
      <td class="sorting_1">2</td>
      <td>CSS</td>
      <td>2016-07-07 10:58:01</td>
      <td>
        <ul class="list-inline actionlist">
          <li>
            <a href="http://localhost/uiprac/user/edit_languages/2" type="button">
              <button class="btn btn-success">Edit</button>
            </a>
          </li>
          <li>
            <button class="btn btn-danger delete" type="button">Delete</button>
          </li>
        </ul>
      </td>

    </tr>
    <tr role="row" class="odd">
      <td class="sorting_1">3</td>
      <td>BOOTSTRAP</td>
      <td>2016-07-07 10:58:09</td>
      <td>
        <ul class="list-inline actionlist">
          <li>
            <a href="http://localhost/uiprac/user/edit_languages/3" type="button">
              <button class="btn btn-success">Edit</button>
            </a>
          </li>
          <li>
            <button class="btn btn-danger delete" type="button">Delete</button>
          </li>
        </ul>
      </td>

    </tr>
    <tr role="row" class="even">
      <td class="sorting_1">4</td>
      <td>JQUERY</td>
      <td>2016-07-07 10:58:17</td>
      <td>
        <ul class="list-inline actionlist">
          <li>
            <a href="http://localhost/uiprac/user/edit_languages/4" type="button">
              <button class="btn btn-success">Edit</button>
            </a>
          </li>
          <li>
            <button class="btn btn-danger delete" type="button">Delete</button>
          </li>
        </ul>
      </td>

    </tr>
  </tbody>

</table>

Whenever I click delete button it will delete complete row up to this no problem.

After deleting if I click next delete button to delete next row no action showing.

Answer 1

Change your script to

$(document).ready(function () {
        $('.delete').on('click', function () {
           if (window.confirm('Dialogue')) {
                $(this).parents('tr').remove();
                alert('removed');
            }
        });
    });

Answer 2

If you check the console after you click a delete button for the first time you'll see the problem:

Uncaught TypeError: confirm is not a function

This is because you need to use the returned boolean value from the confirm() method, not the method itself, in your if condition. Try this:

$('.delete').on('click', function() {
    var result = confirm('Dialogue');
    if (result) {
        $(this).closest('tr').remove()
        alert('removed');
    }
});

Working example