Add and remove html element by jquery

Question

How can I add new <tr> after a clicked <tr>. On click of this <tr> and remove now created when click other <tr> (with repeat 1st scenario) by jQuery?

I tried like this, but it does not work:

$("#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 insert content to the end of each matched element - so you're inserting a tr into another tr. You need a different insertion method — fdomn-m
– fdomn-m, Commented Dec 9, 2021 at 13:56
Also note that $(this).closest('tr') will always be $(this) as the event is on the tr and .closest includes itself. — fdomn-m
– fdomn-m, Commented Dec 9, 2021 at 14:01

Rory McCrossan · Accepted Answer · 2021-12-09 13:45:48Z

Given your goal it seems that you want to replace the current tr with the new HTML snippet. To do that you just need to call after() to insert the new HTML, then remove() to clear the original 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>

However, as the only effect of this is to change the text within the td, you can just call text() instead:

$("#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>

Collectives™ on Stack Overflow

Add and remove html element by jquery

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related