JQuery delete rows allow a maximum of totalrows-1

Question

I have a dynamic table with add and delete functions in jQuery:

I am deleting rows using the following:

$("#DEL").click(function(){
    $("table tr input:checked").parents('tr').remove();
});

Fiddle: FIDDLE

How Can I avoid deleting all columns in same time. I mean if the user checked all rows and click delete, it should show a alert message. Should allow to delete a maximum of totalrows-1

If you only want them to delete one row at a time maybe you should look at having a delete button in each row which will remove that row rather than a checkbox in each row, this would mean you don't need to write code to stop this form happening. — Dhunt, Oct 27 '15 at 15:33
@Dhunt I want to dlete multiple rows in same time provided with my condition!! — Santhucool, Oct 27 '15 at 15:36
Dhunt OP doesnt want that.Instead he wants to stop user to delete all rows at a time.At leadst one row should be unchecked. — , Oct 27 '15 at 15:36
If you want to delete just one, maybe use radio buttons instead of checkboxes: http://jsfiddle.net/qN2Z8/68/ — Mario Chueca, Oct 27 '15 at 15:42

score 5 · Accepted Answer · answered Oct 27 '15 at 15:37

You can use jquery's size() function to count the number of rows with checked inputs and compare to the total number of rows.

$("#DEL").click(function(){
    var checked = $("table tr input:checked").size();
    var total = $("table tr").size();
    if (checked < total) {
        $("table tr input:checked").parents('tr').remove();
    } else {
        alert("You cannot delete all rows!");
    }
});

See the updated fiddle here.

guest271314 · Answer 2 · 2015-10-27T15:52:59.403

1

Try adding check .length of tr elements

  $("#DEL").click(function () {
    console.log($("table tr input:checked").length)
    if ($("table tr").length === 1 
       || $("table input:checked").length === $("table tr").length) {
        alert("cannot delete last tr")
    } else {
        $("table tr input:checked").parents('tr').remove();
    }
  });

jsfiddle http://jsfiddle.net/qN2Z8/72/

edited Oct 27 '15 at 15:52

answered Oct 27 '15 at 15:37

guest271314

1
15
104
177

What if I want to delete the 1st and 3rd row as an example? Should be possible – empiric Oct 27 '15 at 15:39
@guest271314 That still lets you delete all of them if there is more than one row and you check all of them – Andrew Mairose Oct 27 '15 at 15:47

Mi-Creativity · Answer 3 · 2015-10-27T16:12:12.773

1

This will work exactly the way you want, as long as not all rows checked, it will delete every checked row, if all checked, the first one will stay undeleted JSFiddle

$("#ADD").click(function(){
    $("table").append($("tr:last").clone(true));
    $("tr:last input").val("");
});

$("#DEL").click(function(){
    var totalRows = $("table tr").length;
    var totalRowsChecked = $("table tr input:checked").length;
    if(totalRows == totalRowsChecked){
        $("table tr:not(:first) input:checked").parents('tr').remove();
    }else{
        $("table tr input:checked").parents('tr').remove();
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<BUTTON ID="ADD">ADD</button>
<BUTTON ID="DEL">DELETE</button>
<TABLE>
    <TR>
        <TD>
            <INPUT TYPE='CHECKBOX' />
        </TD>
        <TD>
            <INPUT TYPE='TEXT' CLASS='MYTEXT'/>
        </TD>
        <TD>SOMETHING</TD>
    </TR>
</TABLE>

UPDATE: to show an alarm in case of all rows checked this:

$("table tr:not(:first) input:checked").parents('tr').remove();

should be changed into this:

alert("Sorry, cannot delete all rows");

edited Oct 27 '15 at 16:12

answered Oct 27 '15 at 15:44

Mi-Creativity

9,554
10
38
47

Thanks for the downvote, **1st:** it is usual to have more than one way to solve programming problem, **2nd:** it does work on SO and on jsfiddle also, as long as not all rows checked, it deletes the checked ones, otherwise the first row stays undeleted!! – Mi-Creativity Oct 27 '15 at 15:54
@Francescoes., have a look at this SO question for example. it has **13** answers, 3 of them **10+** upvotes, like 4 of them are **1000+** upvote and the rest are **100+** upvote.. while it is solved, still their answers are working too and effective! http://stackoverflow.com/questions/11227809/why-is-processing-a-sorted-array-faster-than-an-unsorted-array – Mi-Creativity Oct 27 '15 at 16:00
be calm man, I correct myself: it doesn't work as expected, your code run, bad, but run. **1st**: you don't notice the user, no feedback (bad). **2st**: it is specified in the question that the checked can be == lengtht -1, that means the last should be always empty, so your answer arrive late, it is less 'elegant' and doesn't solve the problem. I'm just wondering who upvoted you and why – Francesco Oct 27 '15 at 16:03
in the question "*Should allow to delete a maximum of totalrows-1*", my solution DOES delete `totalrows -1`, Man get them all checked and delete them and see!!, however i do apologize for not showing an `alarm` i didn't notice it in the question and only this is my fault, which is easy to fix, still my code deletes totallength - 1 when they're all checked, i will update the answer to include the alarm though – Mi-Creativity Oct 27 '15 at 16:08

JQuery delete rows allow a maximum of totalrows-1

3 Answers3