How to delete dynamically added row using jQuery?

Question

I am trying to put a 'Delete' button after each of the row of my table.The delete button should function in such a way that it should only get activated when a new row is added. And if out of two rows one row is deleted the delete button of the existing row should also get deactivated.Any help will be appreciated. Thanks.

var regex = /^([a-zA-Z0-9 _-]+)$/;
var cindex = 0;
$(document).on('click','.Buttons', function(e) {
  var count = $('table tr:last input:text').filter((_,el) => el.value.trim() == "").length;
  if(count || !$('select:last').val()){
    alert("Please fill all the fields in the current row");
    return false;
  }
    var $tr    = $('#dataTable tbody tr:last');
    var $clone = $tr.clone(true);
    cindex++;
    $clone.find(':input').not('select').val('').attr('disabled', true);
    $clone.attr('id', 'id'+(cindex) ); //update row id if required
    //update ids of elements in row
    $clone.find("*").each(function() {
            var id = this.id || "";
            if(id != ""){

            var match = id.match(regex) || [];
            if (match.length == 2) {
                this.id = match[1] + (cindex);
            }
            }
    });
    $tr.after($clone);
}); 
  /*`For delete button*/
$(document).on("click", '.DeleteButton', function() {
     $(this).closest("tr").remove();
    });
/*for enable field*/

 $(document).on("click", '.DeleteButton', function() {
     $(this).closest("tr").remove();
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="0" cellspacing="1" cellpadding="1" id="dataTable" class="graphtable">
  <thead>

    <tr>
      <td class="headingalign" width="16%">Links</td>
      <td class="headingalign" width="32%">Desciption</td>
      <td class="headingalign" width="16%">Image</td>
      <td class="headingalign" width="16%">URL</td>
      <td class="headingalign" width="16%"></td>

    </tr>
  </thead>
  <tbody>

    <tr id="id01" name="row">

      <td>
    <select type="select-one" id='fldsearch' class="objselect" name="fldsearch" onChange="disableField()" >
          <option value="">Select</option>
          <option value="GDS">Guides</option>
          <option value="LOF">Latest Offers</option>
          <option value="TEM">Templates</option>
          <option value="VID">Videos</option>
        </select>
      </td>
      <td>
        <input id="flddesc" name="flddesc" maxlength="500" disabled="true" class="objinputtext" size="85" value="{//RESPONSE}"  />

      </td>
      <td>
        <input  id="fldimg" name="fldimg" maxlength="50" disabled="true" class="objinputtext" size="35" value="{//RESPONSE}"  />

      </td>
      <td>
        <input id="fldurl" name="fldurl" maxlength="15" disabled="true" class="objinputtext" size="35" value="{//RESPONSE}"  />

      </td>
      <td>
      <input tabindex="6" id="Button4" value="Delete Row" disabled="true" class="DeleteButton" name="Button4" type="button" />
      </td>
    </tr>
  </tbody>
</table>  
        <div class="buttonarea">
  <ul>
    <li><input tabindex="6" id="Button3" value="Add New Row" class="Buttons" name="Button3" type="button" /></li>
  </ul>

</div>

Muhammad Murad Haider · Accepted Answer · 2019-12-16 07:55:20Z

1

You can get the count of rows in the table on every 'Add New Row' button and 'Delete Row' button click by:

var Count = $('#dataTable tr').length;

Then using the value of Count you can enable/disable the delete button e.g

if(Count < 2 )
//code to disable
else
//code to enable

answered Dec 16, 2019 at 7:55

Muhammad Murad Haider

1,5272 gold badges19 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Saurav Over a year ago

Thanks for the answer. It worked. :). Just a small edit in your answer. Instead of applying condition as if(Count < 2 ) it should be if(Count == 2 ) as the value will be always two for the first row in my case.

Da Flo · Accepted Answer · 2019-12-16 08:21:00Z

I don't know if I get your question right, but I would try to do it like so:

I would handle this over a class namend 'active'. You also can give this class a disabled style. Also I would toggle the show/hide function of jquery if the button was clicked. And if one button is the last man standing - I would hide all. So it cant be clicked anymore. You can also ignore the 'active'-Class if you juste need to show/hide the buttons. The buttons should have a specific class 'del-btn'.

Note: Class 'active' is just for showing the button but disable/enable. Show/hide is for 'removing' the button.

var regex = /^([a-zA-Z0-9 _-]+)$/;
var cindex = 0;
$(document).on('click','.Buttons', function(e) {
  var count = $('table tr:last input:text').filter((_,el) => el.value.trim() == "").length;
  if(count || !$('select:last').val()){
    alert("Please fill all the fields in the current row");
    return false;
  }
 var $tr    = $('#dataTable tbody tr:last');
 var $clone = $tr.clone(true);
 cindex++;
 $clone.find(':input').not('select').val('').attr('disabled', true);
 $clone.attr('id', 'id'+(cindex) ); //update row id if required
 //update ids of elements in row
 $clone.find("*").each(function() {
        var id = this.id || "";
        if(id != ""){

        var match = id.match(regex) || [];
        if (match.length == 2) {
            this.id = match[1] + (cindex);
        }
        }
});

// If you want to activate ALL buttons:
$('.del-btn').addClass('active');

// If just the added row should be active:
$clone.find('.del-btn').addClass('active');

$(".del-btn").show();

$tr.after($clone);
}); 
  /*`For delete button*/
$(document).on("click", '.DeleteButton', function() {
     if(!$(this).hasClass('active')){
        // removing is allowed
        $(this).closest("tr").remove();
        // Now you can check, if the rest should be shown or not
        var btns = $('.del-btn').length; // count the buttons in the dom
        if(btns>0){
            if(btns == 1){
               $(".del-btn").hide();
            }else{
               $(".del-btn").show();
            }
        }
     }else{
        // removing is disallowed
     }

    });
``````````````````````````for enable field``````````````````````



 $(document).on("click", '.DeleteButton', function() {
     $(this).closest("tr").remove();

 });

Using this my 'Select' function is not working by which if i change the value of 'select' the corresponding field should get enabled

Collectives™ on Stack Overflow

How to delete dynamically added row using jQuery?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related