代码之家 › 专栏 › 技术社区 › Deepak Tomar

jquery通过单击标签删除一行表(<tr>)

jquery-ui css html jquery javascript

Deepak Tomar · 技术社区 · 6 年前

我开发了一个表,每行有一列,每行有一个复选框和两个标签。

$('input[type="label"]').click(function() {
      var id = $(this).attr("id");
      $(this).parent("tr:first").remove()
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <table class="table">
    <thead>
      <tr>
        <th>To Do List</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <div class="checkbox">
            <input type="checkbox" id="checkbox1" /><label>Task 1</label><label class="glyphicon glyphicon-trash"></label>
          </div>
        </td>
      </tr>

      <tr>
        <td>
          <div class="checkbox">
            <input type="checkbox" id="checkbox2" /><label>Task 2</label><label class="glyphicon glyphicon-trash"></label>
          </div>
        </td>
      </tr>

      <tr>
        <td>
          <div class="checkbox">
            <input type="checkbox" id="checkbox3" /><label>Task 3</label><label class="glyphicon glyphicon-trash" id="3"></label>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

当我单击“删除标签”时,整个行应该被删除。它下面的行应该自动在上面一个位置。

在jquery中应该做什么修改?

2 回复 | 直到 6 年前

Ankit Agarwal 6 年前

你需要使用 $(this).closest("tr").remove() 标签上有click事件 glyphicon 和 glyphicon-trash :

$('.glyphicon.glyphicon-trash').click(function(){
      $(this).closest("tr").remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">

  <table class="table">
    <thead>
      <tr>
        <th>To Do List</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <div class="checkbox">
            <input type="checkbox" id="checkbox1" /><label>Task 1</label><label class="glyphicon glyphicon-trash"></label>
          </div>
        </td>
      </tr>

      <tr>
        <td>
          <div class="checkbox">
            <input type="checkbox" id="checkbox2" /><label>Task 2</label><label class="glyphicon glyphicon-trash"></label>
          </div>
        </td>
      </tr>

      <tr>
        <td>
          <div class="checkbox">
            <input type="checkbox" id="checkbox3" /><label>Task 3</label><label class="glyphicon glyphicon-trash" id="3"></label>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Martin 6 年前

您的选择器 input[type=label] 不匹配任何现有的HTML元素。您可能需要尝试以下选择器: $('.checkbox label.glyphicon-trash')