我有一个表,在其中动态添加和删除行.按"删除"时,我想删除整行.这可以很好地处理已经存在的行,但是当对新行使用相同的函数时,它会删除所有内容.

如何仅删除新创建的行,而不是所有行?

我试着用find()来找到tr,但没有用.

$("#addRow").click(function() {
  $("#table").append(
    `<tr>`,
    `<td></td>`,
    `<td></td>`,
    `<td></td>`,
    `<td></td>`,
    `<td></td>`,
    `<td class="remove"><button>Remove</button></td>`,
    `</tr>`
  );

  $('.remove button').on('click', function() {
    removeRow($(this))
  });
})

$('.remove button').on('click', function() {
  removeRow($(this))
});

function removeRow(row) {
  row.parent().parent().remove();
}
#table {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

#table td {
  width: 20%;
  border: solid 1px black;
}

#table .remove {
  border: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td class="remove"><button>Remove</button></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td class="remove"><button>Remove</button></td>
  </tr>
</table>
<p><button id="addRow">Add a new row</button></p>

推荐答案

问题是,您将新的HTML内容作为单个元素附加,因此无法正确生成.如果在调用append()后使用DOM判断器,您将看到问题.

要解决此问题,请将HTML字符串连接在一起,并在一个操作中删除它们:

$("#table").append(
  `<tr>` + 
  `<td></td>` +
  `<td></td>` +
  `<td></td>` +
  `<td></td>` +
  `<td></td>` +
  `<td class="remove"><button>Remove</button></td>` +
  `</tr>`
);

也就是说,您使用的代码并不理想,应该加以改进.

首先,使用<template />元素存储要在实际HTML页面中动态创建的HTML.尽量避免将HTML放在JS中.这样做是不好的做法,因为它违反了关注点分离原则.

从那里,使用jQuery的closest()方法查找要删除的父tr元素,而不是链接多个parent()调用.

最后,在.remove按钮上使用单个委托事件处理程序,这样就不需要在每次创建新行时重新绑定它.

应用这些更正后,您的代码应该如下所示:

let rowTemplate = $('#row-template').html();

$("#addRow").click(function() {
  $("#table").append(rowTemplate);
})

$(document).on('click', '.remove button', e => {
  $(e.target).closest('tr').remove();
});
#table {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

#table td {
  width: 20%;
  border: solid 1px black;
}

#table .remove {
  border: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td class="remove"><button>Remove</button></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td class="remove"><button>Remove</button></td>
  </tr>
</table>
<p><button id="addRow">Add a new row</button></p>

<template id="row-template">
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td class="remove"><button>Remove</button></td>
  </tr>
</template>

Javascript相关问答推荐

如何在JavaScript中在文本内容中添加新行

如何在angular中从JSON值添加动态路由保护?

在这种情况下,如何 for each 元素添加id?

如何将Map字符串,布尔值转换为{key:string;value:bo布尔值;}[]?<>

如何调用名称在字符串中的实例方法?

在react JS中映射数组对象的嵌套数据

Websocket错误—有一个或多个保留位开启:reserved1 = 1,reserved2 = 0,reserved3 = 0

Angular 中的类型错误上不存在获取属性

这个值总是返回未定义的-Reaction

查询参数未在我的Next.js应用路由接口中定义

确保函数签名中的类型安全:匹配值

SPAN不会在点击时关闭模式,尽管它们可以发送日志(log)等

Reaction-SWR-无更新组件

使用jQuery find()获取元素的属性

将相关数据组合到两个不同的数组中

处理app.param()中的多个参数

按特定顺序将4个数组组合在一起,按ID分组

谷歌饼图3D切片

使用Java脚本替换字符串中的小文本格式hashtag

material UI自动完成全宽