Question

我有一个HTML列表，最简单的形式：

<div class="row" id="row-31">
    <div class="col-lg-12">
       <button onClick="removeRow('row-31')">
    </div>
</div>

在我的剧本中：

function removeRow(row){
    console.log(row);
    ('#' + row).remove();
}

在JS内部，我也尝试了(row).remove();等。我记录了要移除的正确行ID，但我不能让它消失。

在将它移动到函数之前，我可以使用$(this).parent().parent().remove();删除行（因为按钮位于一个封闭的div - bootstrap行和col中），但问题是，因为用户可以创建新行，该脚本未绑定到动态创建的按钮，因此我将其移动到一个函数中。现在脚本会触发，但它无法通过它的ID删除项目。

请问有人指点我吗？

我可以让它在90％的路上或10％的路上工作，但不是100％：）

（如果重要的话，行ID是由PHP生成的，但我不认为这是问题）

Answer 1

关闭button并在删除之前添加$。

＆＃13;

function removeRow(row){
    console.log(row);
    $('#' + row).remove();
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" id="row-31">
  <div class="col-lg-12">
    <button onClick="removeRow('row-31')">remove</button>
  </div>
</div>

＆＃13;

这是一个更好的解决方案。对于这个，我建议使用body之外的其他内容，因为它会触发body上的每次点击。如果你有一个没有动态添加的更高元素，请改用它。

＆＃13;

$( "body").on( "click", ".remove", function() {
  console.log($(this).data('value'));
  $('#' + $(this).data('value')).remove();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" id="row-31">
  <div class="col-lg-12">
    <button class="remove" data-value="row-31">remove</button>
  </div>
</div>

＆＃13;

Jquery - 删除通过函数传入的ID标识的项目

1 个答案: