Delete row table except first row

I have a form that allows the user to add a new row to the table with a button in the bottom row that works well. Now I also need to add functionality to add an extra button so that they can delete the table row.

I am going to use the simplest method:

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

but it's hard for me to integrate this into existing functionality. I also need only the delete button for all lines except the first line (i.e. Users can delete all lines except the first). I installed jsfiddle here, which demonstrates my current functionality:

http://jsfiddle.net/fmdataweb/daayf/1/

So, in my example, when the user clicks the “Add another activity” button, he must create a new row in the table, as she is doing now, and also add a “delete” button that deletes this row. I have currently hard-coded the delete button on the first line, since now I’m sure how to make it visible only to new lines created using the add new activity button.

+6
source share
12 answers

Few changes

In the start markup add classes addbtn and delbtn also hide the delete button

 <td> <input type="button" class="button mt5 addbtn" value="Add another activity" id="button1" name="button2" /> </td> <td> <input type="button" class="button mt5 delbtn" value="Delete" id="deleteRowButton" name="deleteRowButton" style="display: none"/> </td> 

Then

 $('#lastYear').on('click', '.delbtn', function () { $(this).closest('tr').remove() }); var newIDSuffix = 2; $('#lastYear').on('click', '.addbtn', function () { var thisRow = $(this).closest('tr')[0]; $(thisRow).find('.delbtn').show(); var cloned = $(thisRow).clone(); cloned.find('input, select').each(function () { var id = $(this).attr('id'); id = id.substring(0, id.length - 1) + newIDSuffix; $(this).attr('id', id); }); cloned.insertAfter(thisRow).find('input:text').val(''); cloned.find('.delbtn').hide(); cloned.find("[id^=lastYearSelect]") .autocomplete({ source: availableTags, select: function (e, ui) { $(e.target).val(ui.item.value); setDropDown.call($(e.target)); } }).change(setDropDown); $(this).remove(); newIDSuffix++; }); 

Demo: Fiddle

+4
source

Check this!

if($("table tr").length > 1) {
$(this).parent().parent("tr").remove(); }

+4
source

try it

On your delete button

 $('#lastYear').on('click', '#deleteRowButton', function(e){ $(this).closest('tr').remove() }) 
+3
source

First of all, I renamed your Button1 to add your row to addRowButton , and then I changed the delegate method to be more specific to addRowButton, which is from

 $('#lastYear').delegate('input[type="button"]' 

To do this:

 $('#lastYear')delegate('input[type="button"][id^="addRow"]' 

Then inside the delegate method specifically after

  $(this).attr('id', id); 

After that, I add the following:

  var checkid = $(this).attr('id').substring(0,id.length-1); if (checkid == 'deleteRowButto') // the 'deleteRowButto' is not a mistake { $(this).click(function() { $(this).closest("tr").remove(); // I assign an onclick for the delete button in order to remove a specific row }); } 

Edit:

I made some improvements that, after deleting a line, the previous add button is displayed, so I add the code below:

  var showmenow = $(this).closest("tr").prev().find("td:eq(5)").find("input[type='button']"); $(showmenow).show(); $(this).closest("tr").remove(); }); 

And instead of removing the button in the source code:

 $(this).remove(); newIDSuffix++; 

Instead, I use hide:

 $(this).hide(); newIDSuffix++; 

See the new jsfiddle I created.

+3
source

Since you want to use the first line as a template for all the other lines, but don’t want to have a delete in all the other lines, we only need to insert the delete during the first insert in the java script. Check this demo version, I modified your fiddle to make it work.

 if(cloned.find('input.mt5[value="Delete"]').length==0){ cloned.find('.mt5').each(function(){ cloned.append($('<td><input type="button" class="button mt5" value="Delete" id="deleteRow'+newIDSuffix+'" name="deleteRowButton" /></td>')); }) } 

now to handle delete events

 $('#lastYear').delegate('input.button[value="Delete"]', 'click', function () { var thisrow=$(this).parent().parent(); var button=thisrow.find("input.button[value='Add another activity']"); if(button.length>0){ var buttoncell=button.parent().detach(); var prevrow=thisrow.prev(); var prevDelete=prevrow.find('input.button[value="Delete"]'); var previd=(prevDelete.length>0)?prevDelete[0].id:'deleteRow1'; buttoncell.children()[0].id=previd.replace('deleteRow','button'); prevrow.find('input:text:last').parent().after(buttoncell); } thisrow.remove(); }); 

Demo: http://jsfiddle.net/vwdXD/2/

+3
source

You have this right for the most part, with the exception of a little supervision here and there. I fixed your code for you, and you can find it here: http://jsfiddle.net/ManojRK/86Nec/ .

Try to understand the changes by comparing your version and my version using the Code Diff Tool (for example, http://www.quickdiff.com ). It will teach you a lot.

Changes made:

  • I used styles to show and hide buttons. This is not the only way to do this. But since you are cloning the lines to add, using styles will make your JavaScript simple. This is much less erroneous and less prone to change.
  • I introduced css classes to distinguish between the Add Another Activity and Delete buttons for the click event.

Hope this helps you understand.

+3
source

I used the jsfiddle you provided in the hope of being more direct in terms of answering your question. The method that I adopted was as follows:

  • Check if the add or remove button was pressed
  • If the delete button was pressed, check if its delete button contains in the first line (actually the third line, but the first line with user input). If the delete button is on the first line, do nothing
  • If the delete button was not in the first row, create the “add activity” button in the previous row and delete the parent row of the button with the button pressed.

Step 1:

  // let check whether they clicked the add or delete button if ( $(this).val() == 'Add another activity' ) { // if the add button was clicked 

Step 2-3:

  if ( $(thisRow).index() == 2 ) { // if it the first row, don't let them delete return false; } else { // if it is not the first row remove this row and create an 'add' button in first row $(thisRow).prev().find('td:last').prev().append('<input type="button" class="button mt5" value="Add another activity" id="button2" name="button2">'); $(thisRow).remove(); } 

Here is the script for ya: http://jsfiddle.net/daayf/22/

I put a couple of comments in the code to help a bit. My changes were:

  • Line 275-276
  • Line 300-307

Hope this helps!

+3
source

I recommend adding the id attribute dynamically for each row so that you can just reference that id in jQuery.

+2
source

You can set a specific class for buttons such as

 <input type="button" class="button mt5 deleteButton" value="Delete" id="deleteRowButton" name="deleteRowButton" /> 

and add this code in jquery

 $('.deleteButton').on('click',function(){ $(this).parent().parent().remove(); }); 

this jquery deletes input grandparents using the deleteButton class (delete button), which is the line it is in.

+2
source

how to do it?

 $(this).find('tr').length > 0 ? $(this).closest('tr').remove() : ; 
0
source

Why does your "add new activity" and "delete" have the same "mt5 button" class? not sure if class namespace is allowed.

You can refer to my table here http://jsfiddle.net/yvonnezoe/nbrSR/1/ : DI has a fixed line at the top and dynamic lines that can be deleted.

My new line is created as shown below:

 var str = '<tr id="' + rowID + '">' + '<td>' + index + '</td><td>' + rowID + '</td><td class="type_row_' + textInput + '">' + type + '</td><td class="feedback number">' + textInput + '</td>' + '<td id="status_'+rowID+'"></td>' + '<td><input type="checkbox" name="CB" id="monitor_' + rowID + '" class="custom" data-mini="true" /><label for="CB"> </label></td><td class="outputRemove">x</td>' + '</tr>'; $('#status_table tr:last').after(str); 

Delete buttons have the same class. Thus, rows can be deleted when clicked.

 $('#status_table').on('click', '.outputRemove', function () { $(this).closest('tr').remove(); $('#status_table tbody tr').find('td:first').text(function (index) { return ++index; }); 

});

I hope this inspires you somehow :)

0
source

very easy way

 function remove_point_item(th) { var tr = $(th).closest("tr"); var _counter=0; $(tr.siblings('tr')).each(function(){ _counter++; }); if(_counter!=1){ tr.remove(); } } 
0
source

Source: https://habr.com/ru/post/943492/


All Articles