删除动态行条目

Question

我有以下 html 视图和 javascript：

var rowCount = 1;
$(".add_more_rows").click(function() {
  rowCount++;

  var recRow = '<p id="rowCount' + rowCount + '"><tr><td><input name="" type="text" size="17%"  maxlength="120" /></td>\n\
<td><input name="" type="text"  maxlength="120" style="margin: 4px 5px 0 5px;"/></td>\n\
<td><input name="" type="text" maxlength="120" style="margin: 4px 10px 0 0px;"/></td>\n\
<td> <span id="remove_row' + rowCount + '" class="remove_row' + rowCount + '" style="font:normal 12px agency, arial; color:blue; text-decoration:underline; cursor:pointer;">Delete Entry</span> </td></tr> </p>';

  $('.remove_row' + rowCount + '').click(function() {

    $('#rowCount' + rowCount).remove();
  });
  $('#addedRows').append(recRow);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <table rules="all" style="background:#fff;">
    <tr>
      <td style="font-size:14px;">Name</td>
      <td style="font-size:14px;">Email</td>
      <td style="font-size:14px;">Mobile</td>
      <td><span class="add_more_rows" id="add_more_rows" style="font:normal 12px agency, arial; color:blue; text-decoration:underline; cursor:pointer;">
                                Add More
                            </span>
      </td>
    </tr>
    <tr id="rowId">
      <td>
        <input name="" type="text" value="" size="17%" />
      </td>
      <td>
        <input name="" type="text" value="" />
      </td>
      <td>
        <input name="" type="text" value="" />
      </td>
  </table>
  <div id="addedRows"></div>
  </td>
  </tr>
</div>

当我单击“添加更多”按钮时，应将新行添加到我的表中，该行完美运行，并且为每一行分配了唯一的 ID 和类，但是当我尝试单击“删除条目”删除特定行时，它失败。请告知在 remove_row 上没有正确执行哪些操作会阻止触发器发生以及不删除该行。

Answer 1

选择父元素并将其从 DOM 中删除。我已将以下函数添加到 javascript 中，并将 onClick="javascript:fnRemove(this);" 添加到 span

function fnRemove(t){
    $(t).parent('p').remove();
}

---

var rowCount = 1;
$(".add_more_rows").click(function() {
  rowCount++;

  var recRow = '<p id="rowCount' + rowCount + '"><tr><td><input name="" type="text" size="17%"  maxlength="120" /></td>\n\
<td><input name="" type="text"  maxlength="120" style="margin: 4px 5px 0 5px;"/></td>\n\
<td><input name="" type="text" maxlength="120" style="margin: 4px 10px 0 0px;"/></td>\n\
<td> <span id="remove_row' + rowCount + '" onClick="javascript:fnRemove(this);" class="remove_row' + rowCount + '" style="font:normal 12px agency, arial; color:blue; text-decoration:underline; cursor:pointer;">Delete Entry</span> </td></tr> </p>';

  $('#addedRows').append(recRow);

});

function fnRemove(t) {
  $(t).parent('p').remove();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <table rules="all" style="background:#fff;">
    <tr>
      <td style="font-size:14px;">Name</td>
      <td style="font-size:14px;">Email</td>
      <td style="font-size:14px;">Mobile</td>
      <td><span class="add_more_rows" id="add_more_rows" style="font:normal 12px agency, arial; color:blue; text-decoration:underline; cursor:pointer;">
                                Add More
                            </span>
      </td>
    </tr>
    <tr id="rowId">
      <td>
        <input name="" type="text" value="" size="17%" />
      </td>
      <td>
        <input name="" type="text" value="" />
      </td>
      <td>
        <input name="" type="text" value="" />
      </td>
  </table>
  <div id="addedRows"></div>
  </td>
  </tr>
</div>

Answer 2

我认为您那里有很多不必要的代码。您无需设置单独的 id 等。只需确定单击哪个锚标记正在删除哪个 <tr>。

$("a.remove_row").on("click", function() {
    $(this).parents("tr").remove();
});

sn-p 显示删除操作：

$(document).ready(function() {
  $("a").on("click", function() {
    $(this).parents("tr").remove();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table border=1 cellpadding=3>
  <tr>
    <td>Line 1</td>
    <td>Line 1</td>
    <td>Line 1</td>
    <td>Line 1</td>
    <td><a href=#>delete</a>
    </td>
  </tr>
  <tr>
    <td>Line 2</td>
    <td>Line 2</td>
    <td>Line 2</td>
    <td>Line 2</td>
    <td><a href=#>delete</a>
    </td>
  </tr>
  <tr>
    <td>Line 3</td>
    <td>Line 3</td>
    <td>Line 3</td>
    <td>Line 3</td>
    <td><a href=#>delete</a>
    </td>
  </tr>
  <tr>
    <td>Line 4</td>
    <td>Line 4</td>
    <td>Line 4</td>
    <td>Line 4</td>
    <td><a href=#>delete</a>
    </td>
  </tr>
</table>

旁注：

1. 您绝对不应该在<p> 元素中包装表格行（这就是我不喜欢@Pugazh 的答案的原因）。它在 XML 意义上不是无效的，但它在 html 方面非常糟糕。也没有必要，你可以直接加你的rowCount给你<tr>（不过这个答案也没有必要）。
2. 您应该使用 css 来设置 input 框的样式（尤其是不要将其放入模板中）。下面的小提琴基本说明了这一点。

全功能示例：

我将这个 updated fiddle 放在一起，以清晰地演示添加和删除行（没有上面的一些混乱） .正如@Ohohorion 所说，事件冒泡是您真正需要利用的，以便删除已动态插入的行。与其将事件绑定到table，不如将​​其附加到document（如fiddle）

Answer 3

试试这个：

 $(document).on('click','.remove_row' + rowCount,function () {

                $('#rowCount' + rowCount).remove();
            });

Answer 4

大量不必要的代码和不良做法，例如用段落标签 (<p>) 包装表格行。但这都是关于学习的。 ;)

我建议您阅读有关 event bubbling 的内容，以及它在此类情况下如何提供帮助，否则您每次都必须初始化新的侦听器。

在这种情况下，不必每次都初始化一个新的事件侦听器，您可以使用如下方式：

$('table').on('click', '.remove_row', function () {

代替：

$('.remove_row' + rowCount + '').click(function () {

由于事件冒泡规则，表也被触发，我们传递第二个参数让 JQuery 现在我们只对具有“remove_row”类的后代触发的事件感兴趣。

我很快JSFiddle 来检查我的意思以及我在哪里删除了多余的代码并删除了不良做法。

我做的很快，如果你发现还有问题，

Answer 5

试试这个它的工作原理

 <script>
var rowCount = 1;
function deletes(e){
    $('#rowCount' + e).remove();
}
$(document).ready(function () {

    $(".add_more_rows").click(function () {
        //alert("121212");
        rowCount++;

        var recRow = '<p id="rowCount' + rowCount + '"><tr><td><input name="" type="text" size="17%"  maxlength="120" /></td>\n\
                    <td><input name="" type="text"  maxlength="120" style="margin: 4px 5px 0 5px;"/></td>\n\
                    <td><input name="" type="text" maxlength="120" style="margin: 4px 10px 0 0px;"/></td>\n\
                    <td> <span id="remove_row'+rowCount+'" class="remove_row'+rowCount+'" style="font:normal 12px agency, arial; color:blue; text-decoration:underline; cursor:pointer;" onclick="deletes('+rowCount+');">Delete Entry</span> </td></tr> </p>';

    $('#addedRows').append(recRow);

    });

});