Tengo una fila de 2 estáticamente, es un valor predeterminado. y quiero agregar más filas debajo de las filas predeterminadas ... y no sé cómo eliminar la fila secundaria sin eliminar la fila principal ...

Mi fila principal tiene dos filas predeterminadas. No quiero eliminar esas dos filas ... solo quiero eliminar las filas secundarias ...

var ctr = 1;
var FieldCount = 1;
$('#cashTable').on('click', '.button-add', function() {
  ctr++;
  var cashacc_code = 'cashacc_code' + ctr;
  var cashacc = 'cashacc' + ctr;
  var cash_narrat = 'cash_narrat' + ctr;
  var cashdeb = 'cashdeb' + ctr;
  var cashcredit = 'cashcredit' + ctr;
  var newTr = '<tr class="jsrow"><td><input type="number" class=' + "joe" + ' id=' + cashacc_code + ' placeholder="NNNN" /></td><td><select class="form-control" id="cashacc" ><option value="">Choose an Items</option><option value="1">Joe</option><option value="2">Joe</option><option value="3">Joe</option></select></td><td><input type="text" class=' + "joe" + ' id=' + cash_narrat + ' placeholder="Enter Here" /></td><td><input type="number" class=' + "joe" + ' id=' + cashdeb + ' ' + FieldCount + ' placeholder="NNNN" /></td><td><input type="number" class=' + "joe" + ' id=' + cashcredit + ' /></td><td style="width: 4%"><img src="./img/plus.svg" class="insrt-icon button-add"><img src="./img/delete.svg" class="dlt-icon"></td></tr>';
  $('#cashTable').append(newTr);
  // delete row
  $(document).ready(function() {
    $('.dlt-icon').click(DeleteRow);
  });

  function DeleteRow() {
    $(this).parents('tr').first().remove();
  }
});
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<table id="cashTable" class="table table-bordered table-striped" required>
  <thead>
    <tr>
      <th>A/c Code</th>
      <th>Account Name*</th>
      <th>Narration*</th>
      <th>Debit*</th>
      <th>Credit</th>
    </tr>
  </thead>
  <tbody>
    <tr id="fst_row">
      <!-- First row -->
      <td>
        <input type="number" id="cashacc_code" placeholder="NNNN" class="form-control" name="cashacc_code" />
      </td>
      <td>
        <select class="form-control selectsch_items" name="cashacc" id="cashacc">
          <option value="Choose and items">Choose and items</option>
          <option value="1">TDS A/c Name 1</option>
          <option value="2">TDS A/c Name 2</option>
        </select>
      </td>
      <td>
        <input type="text" id="cash_narrat" placeholder="Enter here" class="form-control" pattern="[a-zA-Z0-9-_.]{1,20}" name="cash_narrat" data-toggle="modal" data-target="#narratModal" />
      </td>
      <td>
        <input type="number" id="cashdeb" placeholder="Debit Amount" class="form-control" name="cashdeb" readonly/>
      </td>
      <td>
        <input type="text" id="cashcredit" class="form-control" name="cashcredit" readonly/>
      </td>
      <td style="width: 4%">
        <a href="#"><img src="./img/plus.svg" class="insrt-icon button-add"></a>
        <a href="#"><img src="./img/delete.svg" class="dlt-icon button-add"></a>
      </td>
    </tr>

    <!-- Second Row -->

    <tr id="sndRow">
      <td>
        <input type="number" class="form-control" id="rowNum" name="cashaccCode" placeholder="NNNN" />
      </td>
      <td>
        <select class="form-control selectsch_items" name="cashacc_nme" id="cashacc_nme">
          <option value="#">Choose and items</option>
          <option value="1">Joe</option>
          <option value="2">Joe2</option>
        </select>
      </td>
      <td>
        <input type="text" class="form-control" id="acc_narrat" placeholder="Enter here" name="acc_narrat" data-toggle="modal" data-target="#accnarratModal" />
      </td>
      <td>
        <input type="number" class="form-control" id="accdeb" placeholder="NNNNNN" name="accdeb" />
      </td>
      <td>
        <input type="number" id="accCredit" class="form-control" name="accCredit" readonly/>
      </td>
      <td style="width: 4%">
        <a href="#"><img src="./img/plus.svg" class="insrt-icon button-add"></a>
        <a href="#"><img src="./img/delete.svg" class="dlt-icon"></a>
      </td>
    </tr>

  </tbody>
</table>

Si no lo entiende, hágamelo saber.

0
Joe 27 sep. 2019 a las 12:39

1 respuesta

La mejor respuesta

Si no desea eliminar las dos primeras filas que ya se crearon, utilice .jsrow como se muestra a continuación

Otra cosa que debes entender es el uso de clases, agregaste la clase button-add tanto en el botón de agregar como en el de quitar, así que mira mi código y corrígelo.

var ctr = 1;
var FieldCount = 1;
$('#cashTable').on('click', '.button-add', function() {
  ctr++;
  var cashacc_code = 'cashacc_code' + ctr;
  var cashacc = 'cashacc' + ctr;
  var cash_narrat = 'cash_narrat' + ctr;
  var cashdeb = 'cashdeb' + ctr;
  var cashcredit = 'cashcredit' + ctr;
  var newTr = '<tr class="jsrow"><td><input type="number" class=' + "joe" + ' id=' + cashacc_code + ' placeholder="NNNN" /></td><td><select class="form-control" id="cashacc" ><option value="">Choose an Items</option><option value="1">Joe</option><option value="2">Joe</option><option value="3">Joe</option></select></td><td><input type="text" class=' + "joe" + ' id=' + cash_narrat + ' placeholder="Enter Here" /></td><td><input type="number" class=' + "joe" + ' id=' + cashdeb + ' ' + FieldCount + ' placeholder="NNNN" /></td><td><input type="number" class=' + "joe" + ' id=' + cashcredit + ' /></td><td style="width: 4%"><img src="./img/plus.svg" class="insrt-icon button-add"><img src="./img/delete.svg" class="dlt-icon"></td></tr>';
  $('#cashTable').append(newTr);
  // delete row
 

  
});

 $(document).on( 'click', '.dlt-icon', function() {
    $(this).parents('tr.jsrow').first().remove();
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="cashTable" class="table table-bordered table-striped" required>
  <thead>
    <tr>
      <th>A/c Code</th>
      <th>Account Name*</th>
      <th>Narration*</th>
      <th>Debit*</th>
      <th>Credit</th>
    </tr>
  </thead>
  <tbody>
    <tr id="fst_row">
      <!-- First row -->
      <td>
        <input type="number" id="cashacc_code" placeholder="NNNN" class="form-control" name="cashacc_code" />
      </td>
      <td>
        <select class="form-control selectsch_items" name="cashacc" id="cashacc">
          <option value="Choose and items">Choose and items</option>
          <option value="1">TDS A/c Name 1</option>
          <option value="2">TDS A/c Name 2</option>
        </select>
      </td>
      <td>
        <input type="text" id="cash_narrat" placeholder="Enter here" class="form-control" pattern="[a-zA-Z0-9-_.]{1,20}" name="cash_narrat" data-toggle="modal" data-target="#narratModal" />
      </td>
      <td>
        <input type="number" id="cashdeb" placeholder="Debit Amount" class="form-control" name="cashdeb" readonly/>
      </td>
      <td>
        <input type="text" id="cashcredit" class="form-control" name="cashcredit" readonly/>
      </td>
      <td style="width: 4%">
        <a href="#"><img src="./img/plus.svg" class="insrt-icon button-add"></a>
        <a href="#"><img src="./img/delete.svg" class="dlt-icon "></a>
      </td>
    </tr>

    <!-- Second Row -->

    <tr id="sndRow">
      <td>
        <input type="number" class="form-control" id="rowNum" name="cashaccCode" placeholder="NNNN" />
      </td>
      <td>
        <select class="form-control selectsch_items" name="cashacc_nme" id="cashacc_nme">
          <option value="#">Choose and items</option>
          <option value="1">Joe</option>
          <option value="2">Joe2</option>
        </select>
      </td>
      <td>
        <input type="text" class="form-control" id="acc_narrat" placeholder="Enter here" name="acc_narrat" data-toggle="modal" data-target="#accnarratModal" />
      </td>
      <td>
        <input type="number" class="form-control" id="accdeb" placeholder="NNNNNN" name="accdeb" />
      </td>
      <td>
        <input type="number" id="accCredit" class="form-control" name="accCredit" readonly/>
      </td>
      <td style="width: 4%">
        <a href="#"><img src="./img/plus.svg" class="insrt-icon button-add"></a>
        <a href="#"><img src="./img/delete.svg" class="dlt-icon"></a>
      </td>
    </tr>

  </tbody>
</table>
1
Devsi Odedra 27 sep. 2019 a las 09:51