Deleting row from table without refreshing page

Question

I have page where it displays a list of orders. I'm trying deleting row of the table when a user clicks on a button, but its just removing the first row and when i try to delete the second or third row it cannot be delete it. Can anyone please help me or point me in to the right direction? Thanks in advance.

View:

<table id="Tableitem" class="table">
    <tbody>
    @foreach (var item in Model)
    {
    <tr>
        <td>
            <div class="product-title">
                <a href="/Main/Produktdetaljer/@item.ProductId?proid=@item.ProductId">
                    @Html.DisplayFor(modelItem => item.ProductName)
                </a>
            </div>
        </td>
        <td>
            <ul>
                <li>
                    <div class="base-price price-box"> 
                        <span class="price"> 
                            @Html.DisplayFor(modelItem => item.Price) 
                        </span> 
                    </div>
                </li>
            </ul>
        </td>
        <td class="QuantityOfProduct@(item.ProductId)">
            @Html.DisplayFor(modelItem => item.Quantity)
        </td>
       <td>
       <i data-id="@item.ProductId" class="fa fa-trash cart-remove-item removeproduct"></i>
      </td>
    </tr>
    }
    </tbody>
</table>

Javascipt:

$("i.removeproduct").click(function (e) {
    e.preventDefault();

    var $this = $(this);
    var productId = $(this).data("id");
    var url = "/cart/RemoveProduct";

    $.get(url, { productId: productId }, function (data) {
         // i used .load for not refreshing page
        $('#Tableitem').load(document.URL + ' #Tableitem');

        });         
});

`$("#Tableitem").on('click' , "i.removeproduct" , function (e){` instead of `$("i.removeproduct").click(function (e) {` take a look at https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — Mohamed-Yousef, Dec 01 '18 at 17:35

score 0 · Answer 1 · answered Dec 01 '18 at 17:27

0

try this

$(this).parent().remove();

or

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

it's up to you.

answered Dec 01 '18 at 17:27

MohSalah66

64
1
6

ya Mohammed he try to delete the row with `$.get` then load the whole table again without the deleted row .. so he just need to [https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) – Mohamed-Yousef Dec 01 '18 at 17:43

Deleting row from table without refreshing page

1 Answers1