CODEWITHSUNDEEP
javascriptjqueryhtml
Humano
Humano

Reputation: 3

how can i clone and erase a row in every row

i can clone the first and the last row but i cant clone the 2, 3, 4 and so on rows, so how can i target this rows to clone and erase them respectively.

now i have to write trash so i can post cause my whatever have too mucho code, really men come on this is not esayflow is it XD

demo

$('button[name=add]').on('click', function() {
  var cloned = $('#table1 tr:last').clone(true);

  $('#table1').append(cloned);
})
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered" id="table1">
  <tr>
    <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
    <th>5</th>
  </tr>
  <tbody>
    <tr id="2">
      <td>2</td>
      <td>
        <select name="numero" id="" class="form-control">
          <option value="">a</option>
          <option value="">b</option>
          <option value="">c</option>
          <option value="">d</option>
          <option value="">e</option>
          <option value="">...</option>
        </select>
        <button name="add">+</button>
        <button name="erase">-</button>
      </td>
      <td><input type="number" min="0" class="form-control"></td>
      <td><input type="number" min="0" class="form-control"></td>
      <td><input type="number" min="0" class="form-control"></td>
    </tr>
    <tr>
      <td>3</td>
      <td>
        <select name="numero" id="" class="form-control">
          <option value="">1</option>
          <option value="">2</option>
          <option value="">3</option>
          <option value="">4</option>
          <option value="">5</option>
          <option value="">...</option>
        </select>
        <button name="add">+</button>
        <button name="erase">-</button>
      </td>
      <td><input type="number" min="0" class="form-control"></td>
      <td><input type="number" min="0" class="form-control"></td>
      <td><input type="number" min="0" class="form-control"></td>
    </tr>
  </tbody>
</table>

Upvotes: 0

Views: 58

Answers (4)

Dhaval Pankhaniya
Dhaval Pankhaniya

Reputation: 1996

Use closest() to clone and remove closest tr.

$('button[name=add]').on('click', function() {
  var cloned = $(this).closest('tr').clone(true);
  $('#table1 tbody tr:last').after(cloned);
})
$('button[name=erase]').on('click', function() {
  $(this).closest("tr").remove();
})
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered" id="table1">
  <tr>
    <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
    <th>5</th>
  </tr>
  <tbody>
    <tr id="2">
      <td class="count">1</td>
      <td>
        <select name="numero" id="" class="form-control">
          <option value="">a</option>
          <option value="">b</option>
          <option value="">c</option>
          <option value="">d</option>
          <option value="">e</option>
          <option value="">...</option>
        </select>
        <button name="add">+</button>
        <button name="erase">-</button>
      </td>
      <td><input type="number" min="0" class="form-control"></td>
      <td><input type="number" min="0" class="form-control"></td>
      <td><input type="number" min="0" class="form-control"></td>
    </tr>
  </tbody>
</table>

Upvotes: 0

AJAY MAURYA
AJAY MAURYA

Reputation: 551

Use remove() function to remove your target. 

$('button[name=add]').on('click', function() {
  var cloned = $(this).closest('tr').clone(true);

  $('#table1').append(cloned);
})
$('button[name=erase]').on('click', function() {

  $(this).closest('tr').remove();

});
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered" id="table1">
<thead>
  <tr>
    <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
    <th>5</th>
  </tr>
  </thead>
  <tbody>
    <tr id="2">
      <td>2</td>
      <td>
        <select name="numero" id="" class="form-control">
          <option value="">a</option>
          <option value="">b</option>
          <option value="">c</option>
          <option value="">d</option>
          <option value="">e</option>
          <option value="">...</option>
        </select>
        <button name="add">+</button>
        <button name="erase">-</button>
      </td>
      <td><input type="number" min="0" class="form-control"></td>
      <td><input type="number" min="0" class="form-control"></td>
      <td><input type="number" min="0" class="form-control"></td>
    </tr>
    <tr>
      <td>3</td>
      <td>
        <select name="numero" id="" class="form-control">
          <option value="">1</option>
          <option value="">2</option>
          <option value="">3</option>
          <option value="">4</option>
          <option value="">5</option>
          <option value="">...</option>
        </select>
        <button name="add">+</button>
        <button name="erase">-</button>
      </td>
      <td><input type="number" min="0" class="form-control"></td>
      <td><input type="number" min="0" class="form-control"></td>
      <td><input type="number" min="0" class="form-control"></td>
    </tr>
  </tbody>
</table>

Upvotes: 0

Love Buddha
Love Buddha

Reputation: 95

If clone does not work properly use "outerHTML" and append it to nearest "tbody".

as follows:

$('button[name=add]').on('click', function() {

  var cloned = $(this).closest('tr')[0].outerHTML;

  $(this).closest('tbody').append(cloned);

});

For removing row:

$('button[name=minus]').on('click', function() {

  $(this).closest('tr').remove();

});

Upvotes: 1

Ahmad
Ahmad

Reputation: 12737

You need to clone the tr that has the button you clicked. In your code, you are specifying only the last row to be cloned.

So, to clone any other row, target the row containing the button that has been clicked using jQuery .closest()

$('button[name=add]').on('click', function() {
  // this will select the first tr parent that contain the button
  var cloned = $(this).closest('tr').clone(true);

  $('#table1').append(cloned);
})

Upvotes: 0

Related Questions