通过jquery添加和删除html元素答案

【问题标题】：Add and remove html element by jquery通过jquery添加和删除html元素
【发布时间】：2022-01-14 08:17:28
【问题描述】：

如何在点击<tr> 后添加新的<tr>。单击此<tr> 并在单击其他<tr>（重复第一种情况）时通过jQuery 删除现在创建的？

我试过这样，但它不起作用：

$("#test_table tr").click(function() {
  $(this).prev().remove();
  $(this).closest('tr').append('<tr><td>2.2</td></tr>');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="test_table">
  <tr>
    <td>1</td>
  </tr>
  <tr>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
  </tr>
</table>

【问题讨论】：

api.jquery.com/append 在每个匹配元素的末尾插入内容 - 所以你插入 tr into i> 另一个tr。你需要一个不同的insertion method
另请注意，$(this).closest('tr') 将始终为 $(this)，因为事件在 tr 上，.closest 包括它自己。

标签： javascript html jquery

【解决方案1】：

鉴于您的目标，您似乎想用新的 HTML sn-p 替换当前的 tr。为此，您只需调用after() 插入新的HTML，然后调用remove() 清除原来的tr：

$("#test_table tr").click(function() {
  $(this).after('<tr><td>2.2</td></tr>').remove();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="test_table">
  <tr>
    <td>1</td>
  </tr>
  <tr>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
  </tr>
</table>

但是，由于这样做的唯一效果是更改 td 中的文本，您可以直接调用 text()：

$("#test_table tr").click(function() {
  $(this).find('td').text('2.2');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="test_table">
  <tr>
    <td>1</td>
  </tr>
  <tr>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
  </tr>
</table>

【讨论】：