How do I manipulate the jQuery Clone to remove an attribute

Question

I have a table with rows where data is populated through the foreach.

I am using :last selector to select the element and clone to add new row. Whereas using remove to delete the rows.

While populating the result using foreach, I have disabled few fields, I am looking for a workaround on how to remove the disabled attribute for the particular element.

Prefilled the data for ease

 $("#add_row").on("click", function (e) { var $tableBody = $('#tab_logic').find("tbody"), $trLast = $tableBody.find("tr:last"), $trNew = $trLast.clone(); $trLast.after($trNew); }); $("#delete_row").click(function () { $('#tab_logic #tab_logic_body tr:last').remove(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="tab_logic" id="tab_logic"> <thead class="orange "> <tr> <th> Product Name </th> <th> HSN Code </th> <th class="center"> GST </th> <th> Quantity </th> <th> Rate(per Nos) </th> <th> Amount </th> </tr> </thead> <tbody id="tab_logic_body"> @foreach ($invoice_details as $items) // Can be ignored <tr> <td> <input type="text" class="product_name autocomplete" placeholder="" value="Product Name" disabled> </td> <td> <div class="col s12"> <div class="row"> <div class="input-field col s12"> <input type="text" class="hsn_code autocomplete" placeholder="" value="HSNCODE"> </div> </div> </div> </td> <td> <div class="col s12"> <div class="row"> <div class="input-field col s12"> <input type="text" class="gst autocomplete" placeholder="GST" name="gst[]" readonly="readonly" value="18"> </div> </div> </div> </td> <td> <div class="col s12"> <div class="row"> <div class="input-field col s12"> <input type="number" name='quantity[]' placeholder='Enter Qty' class="form-control qty" step="0" min="0" value="1" /> </div> </div> </div> </td> <td> <div class="col s12"> <div class="row"> <div class="input-field col s12"> <input type="number" name='product_price[]' placeholder='Enter Price' class="form-control product_price" step="0" min="0" value="100" /> </div> </div> </div> </td> <td> <div class="col s12"> <div class="row"> <div class="input-field col s12"> <input type="number" name='row_total_amount[]' placeholder='Total Amount' class="form-control row_total_amount" step="0" min="0" value="118" /> </div> </div> </div> </td> </tr> @endforeach </tbody> </table> <table> <thead> <tr> <th> <th class="right"> <button type="button" class="btn z-depth-1" id="add_row"><i class="material-icons">add_box</i> </button> <button type="button" class="btn z-depth-1 red" id="delete_row"><i class="material-icons">remove</i> </button> </th> </th> </tr> </thead> </table>

Answer 1

To achieve this you can use find() within the $trNew to retrieve all disabled form controls. Then you can use prop('disabled', false) to enable them again:

$trNew.find(':input[disabled]').prop('disabled', false);

 $("#add_row").on("click", function(e) { var $tableBody = $('#tab_logic').find("tbody"), $trLast = $tableBody.find("tr:last"), $trNew = $trLast.clone(); $trLast.after($trNew); $trNew.find(':input[disabled]').prop('disabled', false); }); $("#delete_row").click(function() { $('#tab_logic #tab_logic_body tr:last').remove(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="tab_logic" id="tab_logic"> <thead class="orange "> <tr> <th>Product Name</th> <th>HSN Code</th> <th class="center">GST</th> <th>Quantity</th> <th>Rate(per Nos)</th> <th>Amount</th> </tr> </thead> <tbody id="tab_logic_body"> <tr> <td> <input type="text" class="product_name autocomplete" placeholder="" value="Product Name" disabled> </td> <td> <div class="col s12"> <div class="row"> <div class="input-field col s12"> <input type="text" class="hsn_code autocomplete" placeholder="" value="HSNCODE"> </div> </div> </div> </td> <td> <div class="col s12"> <div class="row"> <div class="input-field col s12"> <input type="text" class="gst autocomplete" placeholder="GST" name="gst[]" readonly="readonly" value="18"> </div> </div> </div> </td> <td> <div class="col s12"> <div class="row"> <div class="input-field col s12"> <input type="number" name='quantity[]' placeholder='Enter Qty' class="form-control qty" step="0" min="0" value="1" /> </div> </div> </div> </td> <td> <div class="col s12"> <div class="row"> <div class="input-field col s12"> <input type="number" name='product_price[]' placeholder='Enter Price' class="form-control product_price" step="0" min="0" value="100" /> </div> </div> </div> </td> <td> <div class="col s12"> <div class="row"> <div class="input-field col s12"> <input type="number" name='row_total_amount[]' placeholder='Total Amount' class="form-control row_total_amount" step="0" min="0" value="118" /> </div> </div> </div> </td> </tr> </tbody> </table> <table> <thead> <tr> <th> <th class="right"> <button type="button" class="btn z-depth-1" id="add_row"><i class="material-icons">add_box</i></button> <button type="button" class="btn z-depth-1 red" id="delete_row"><i class="material-icons">remove</i></button> </th> </th> </tr> </thead> </table>