点击删除完成

时间:2016-07-08 07:59:05

标签: jquery html css



$(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>
&#13;
&#13;
&#13;

每当我点击删除按钮时,它都会删除完整的行,直到这没问题。

删除后如果我单击下一个删除按钮删除下一行没有显示任何操作。

2 个答案:

答案 0 :(得分:4)

如果您在第一次单击删除按钮后检查控制台,您将看到问题:

  

未捕获的TypeError:确认不是函数

这是因为您需要在confirm()条件下使用if方法中返回的布尔值,而不是方法本身。试试这个:

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

Working example

答案 1 :(得分:1)

将脚本更改为

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