How to clone block (rows, button) with events for every button?

Question

I have a table. I want dynamically clone block (several rows with buttons (+, -) in tbody, and these buttons have to add/delete a row, but it adds incorrectly. It is necessary for me that each button added a line in the block but not in another. Help me, please.

$('.wrapper').on('click', '.deleteBlock', function() {
  $('.deleteBlock').closest('.wrapper').find('.rowToClone2').not(':first').last().remove();
  $('.deleteBlock').closest('.wrapper').find('.rowToClone3').not(':first').last().remove();
  $('.deleteBlock').closest('.wrapper').find('.rowToClone4').not(':first').last().remove();
});
$('.wrapper').on('click', '.addBlock', function() {
  $('.addBlock').closest('.wrapper').find('.rowToClone2').first().clone().find("textarea").val("").end().appendTo('.bodyToModify');
  $('.addBlock').closest('.wrapper').find('.rowToClone3').first().clone().find().end().appendTo('.bodyToModify');
  $('.addBlock').closest('.wrapper').find('.rowToClone4').first().clone().find("textarea").val("").end().appendTo('.bodyToModify');
});
$('.bodyToModify').on('click', '.deleteRow', function() {
  $('.deleteRow').closest('.bodyToModify').find('.rowToClone2').not(':first').last().remove();
});
$('.bodyToModify').on('click', '.addRow', function() {
  $('.addRow').closest('.bodyToModify').find('.rowToClone2').first().clone().find("textarea").val("").end().insertBefore('.rowToClone3');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <table border="1" id="tb1">

    <tbody class="bodyToModify">

      <tr class="rowToClone2">
        <td><textarea id="text" rows="2" name="str1"></textarea></td>
        <td><textarea id="text" rows="2" name="str2"></textarea></td>
        <td><textarea id="text" rows="2" name="str3"></textarea></td>
        <td><textarea id="text" rows="2" name="str4"></textarea></td>
      </tr>
      <tr class="rowToClone3">
        <td rowspan="1"><input type="button" class="addRow" value="+" ; style="width: 50px"></td>
        <td colspan="1"><input type="button" class="deleteRow" value="-" ; style="width: 50px"></td>
      </tr>
      <tr class="rowToClone4">
        <th>Result</th>
        <td><textarea id="text" rows="2" name="str2"></textarea></td>
        <td><textarea id="text" rows="2" name="str3"></textarea></td>
        <td><textarea id="text" rows="2" name="str4"></textarea></td>
      </tr>
    </tbody>
  </table>
  <input type="button" value="add" class="addBlock">
  <input type="button" value="delete" class="deleteBlock">
</div>

@mplungjan each Button (+) adds a row, but it adds not in its block, but adds to others. I need each button to add and delete a row in its only block — Jhmxtp, Jun 03 '19 at 06:24
so on the click of + button you want to add child row to that block? — Palak Jadav, Jun 03 '19 at 06:48
@mplungjan Yes, the row in front of the buttons (+, -). but each button must add a row in its only block. how to do it? — Jhmxtp, Jun 03 '19 at 06:53

score 0 · Answer 1 · answered Jun 03 '19 at 07:48

Use $(this) to get the context from the clicked button and then do your search and add/remove.

Check the snippet.

$('.wrapper').on('click', '.deleteBlock', function() {
  $('.deleteBlock').closest('.wrapper').find('.rowToClone2').not(':first').last().remove();
  $('.deleteBlock').closest('.wrapper').find('.rowToClone3').not(':first').last().remove();
  $('.deleteBlock').closest('.wrapper').find('.rowToClone4').not(':first').last().remove();
});
$('.wrapper').on('click', '.addBlock', function() {
  $('.addBlock').closest('.wrapper').find('.rowToClone2').first().clone().find("textarea").val("").end().appendTo('.bodyToModify');
  $('.addBlock').closest('.wrapper').find('.rowToClone3').first().clone().find().end().appendTo('.bodyToModify');
  $('.addBlock').closest('.wrapper').find('.rowToClone4').first().clone().find("textarea").val("").end().appendTo('.bodyToModify');
});
$('.bodyToModify').on('click', '.deleteRow', function() {
  $(this).closest('.rowToClone3').prev().remove();
});
$('.bodyToModify').on('click', '.addRow', function() {
  var buttonBlock = $(this).closest('.rowToClone3');
  $(this).closest('.rowToClone3').prev().first().clone().find("textarea").val("").end().insertBefore(buttonBlock);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="wrapper">
  <table border="1" id="tb1">

    <tbody class="bodyToModify">

      <tr class="rowToClone2">
        <td><textarea id="text" rows="2" name="str1"></textarea></td>
        <td><textarea id="text" rows="2" name="str2"></textarea></td>
        <td><textarea id="text" rows="2" name="str3"></textarea></td>
        <td><textarea id="text" rows="2" name="str4"></textarea></td>
      </tr>
      <tr class="rowToClone3">
        <td rowspan="1"><input type="button" class="addRow" value="+" ; style="width: 50px"></td>
        <td colspan="1"><input type="button" class="deleteRow" value="-" ; style="width: 50px"></td>
      </tr>
      <tr class="rowToClone4">
        <th>Result</th>
        <td><textarea id="text" rows="2" name="str2"></textarea></td>
        <td><textarea id="text" rows="2" name="str3"></textarea></td>
        <td><textarea id="text" rows="2" name="str4"></textarea></td>
      </tr>
    </tbody>
  </table>
  <input type="button" value="add" class="addBlock">
  <input type="button" value="delete" class="deleteBlock">
</div>

How to clone block (rows, button) with events for every button?

1 Answers1