Question

我在表格中添加了一些行。现在我想通过单击该行内的按钮来删除一行。我的追加逻辑有效但我无法使我的删除逻辑工作。

HTML ：

<script type="text/javascript">
    var blank_student_entry ='';
    $(document).ready(function() {
        //$('#bulk_add_form').hide(); 
        blank_student_entry = $('#student_entry').html();
        for ($i = 1; $i<1;$i++) {
            $("#student_entry").append(blank_student_entry);
        }

    });

    function append_credit_table_row()
    {
        $("#student_entry_append2").after('<tr>' +blank_student_entry +'</tr>');
    }

    // REMOVING INVOICE ENTRY
    function deleteParentElement()
    {
        $(this).parent().parent().parent().remove();

    }
</script>

的JavaScript ：

//span[contains(@class,'summary')]
//span[@class='summary']

请任何人可以提供帮助，或建议解决方案吗？

Answer 1

您可以使用jQuery的has()函数来实现此目的。

function deleteParentElement(item) {
   $("tr").has($(item)).remove();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <span>                    <!-- important -->
        <input onclick="deleteParentElement(this);" type="button" value="delete1"/>
        This is a row 1
      </span>
    </td>
  </tr>
  <tr>
    <td>
      <span>                    <!-- important -->
        <input onclick="deleteParentElement(this);" type="button" value="delete2"/>
        This is a row 2
      </span>
    </td>
  </tr>
  <tr>
    <td>
      <span>                    <!-- important -->
        <input onclick="deleteParentElement(this);" type="button" value="delete3"/>
        This is a row 3
      </span>
    </td>
  </tr>
  <tr>
    <td>
      <span>                    <!-- important -->
        <input onclick="deleteParentElement(this);" type="button" value="delete4"/>
        This is a row 4
      </span>
    </td>
  </tr>
  <tr>
    <td>
      <span>                    <!-- important -->
        <input onclick="deleteParentElement(this);" type="button" value="delete5"/>
        This is a row 5
      </span>
    </td>
  </tr>
  <tr>
    <td>
      <span>                    <!-- important -->
        <input onclick="deleteParentElement(this);" type="button" value="delete6"/>
        This is a row 6
      </span>
    </td>
  </tr>
</table>

Answer 2

这是一个动态创建表行的最小示例，其中包含一个可以单击以删除行的按钮。

删除代码会在target处理程序中找到event的{{1}}，因为click位于<button>（1）{ {1}}（2）您必须两次致电<td>。

这是一个堆栈代码段：

＆＃13;

<tr>

＆＃13;

.parent()

＆＃13;

使用jquery删除表行

2 个答案: