Delete row from the page without refreshing the page

Question

I use this method to delete a row from the table. I'm able to delete the row from the database and shows the 'status' alert. But i've to refresh the page for removing the row from the page. What should i do?

<script type="text/javascript">
function DeleteRow(btnDel) {
    $.get('../ProtocolSummary/DeleteRowATList?id2=' + btnDel, function(data, status){
      alert("Status: " + status);
    });
    $(btnDel).closest("tr").remove();
}
</script>



***Html***


<tbody>
            <% var ATRowId = 0; foreach (var item in Model.List)
               {%>
        <tr style="text-align:center">
            <td><%=Html.TextAreaFor(m => m.List[RowId].Type, new { value = @Model.List[ATRowId].Type, @style = "width:260px;" })%>
                <%=Html.HiddenFor(x=>x.List[RowId].AssistiveId,Model.ATList[RowId].AssistiveId) %></td>
            <td><%=Html.TextAreaFor(m => m.List[RowId].Schedule, new { value = @Model.List[ATRowId].Schedule, @style = "width:260px;" })%></td>
            <td><%=Html.TextAreaFor(m => m.List[RowId].Storage, new { value = @Model.List[ATRowId].Storage, @style = "width:260px;" })%></td>
            <td style="width:50px"><input type="button" value="delete" class="btnDel" style="float:right;width:20px" onclick="DeleteRow(<%= item.AssistiveId%>)" /></td>
        </tr>
               <% ATRowId++;
               }%>
            </tbody>

@Manashvi birla, why do one need to use ajax to remove element from DOM ? — Rayon, May 27 '15 at 04:59
http://stackoverflow.com/questions/170997/what-is-the-best-way-to-remove-a-table-row-with-jquery — Robert_Junior, May 27 '15 at 05:01
Firstly a delete action is a POST, not a GET! Based on the query string your generating, `btnDel` in a string or number, not a html element so `$(btnDel)` will not work. Show the html of one row of your table — , May 27 '15 at 05:01
@Manashvi birla, OP could delete the entry from DB. The only issue he is facing is to delete the Table Row from DOM.. — Rayon, May 27 '15 at 05:03
Why do you think `$(btnDel)` should work? You have not assigned it as id or class for any of the elements. — wonderbell, May 27 '15 at 06:14

score 1 · Answer 1 · answered May 27 '15 at 06:28

First thing first (if not already done, since I can see only part of your HTML) : you must put <tbody> inside <table> element.

<table>
    <tbody>
        <tr style="text-align:center">
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td style="width:50px">
                <input type="button" value="delete" class="btnDel" style="width:20px" onclick="DeleteRow(1)" />
            </td>
        </tr>
    </tbody>
</table>

Then, modify the DeleteRow function. You can't access any element using the value in btnDel as it is not id or class for any of the elements. But you can do following

function DeleteRow(btnDel) {
    var btn = event.target;
    $(btn).closest("tr").remove();
}

See the working fiddle

HTH

Nivs · Answer 2 · 2015-05-27T05:22:24.877

I think you are binding the data again to your table/grid after deletion. So you can do like this :

<script type="text/javascript">
function DeleteRow(btnDel) {
$.get('../ProtocolSummary/DeleteRowATList?id2=' + btnDel, function(data, status){
    if(status=="active")
    {
       $.get('../ProtocolSummary/BindRowATList',function(data){
         alert("Data had bind to the grid");
       });                                             
    }
 $(btnDel).closest("tr").remove();
});

}
</script>

Here I am considering "BindRowATList" function to bind the data to the grid in ProtocolSummary Controller.

score 0 · Answer 3 · answered May 27 '15 at 05:14

If you're getting correct your alert, it's because it's inside your promise. jQuery returns a promise (callback) and you're trying to remove your tr before the AJAX run.

I'm not sure how your DOM will get correctly, but I believe it does.

<script type="text/javascript">
function DeleteRow(btnDel) {
    $.get('../ProtocolSummary/DeleteRowATList?id2=' + btnDel, function(data, status){
      alert("Status: " + status);

      //Now I can be deleted as I'm inside the promise
      $(btnDel).closest("tr").remove();
    });    
}
</script>

score 0 · Answer 4 · answered May 27 '15 at 05:27

The way I do it is to have an id for the row and pass that to delete function.

<tr id="rowId">
   <!-- some html -->
   <button type="button" class="deleteRow" onclick="DeleteRow('rowId')">Delete Row</button>
</tr>
<script>
function DeleteRow(rowId) {
    $.get('../ProtocolSummary/DeleteRowATList?id2=' + rowId, function(data, status){
      alert("Status: " + status);
      $("#"+rowId).remove();
    });    
}
</script>

Also, kept the remove function within $get. I do not use tables and haven't used this logic for deleting. But this logic works for updating (adding and removing classes for the element with the id). Hope it helps.

Delete row from the page without refreshing the page

4 Answers4