Is there a way to remove the row after hitting its corresponding button?

Question

Is there a way to remove the row after hitting its corresponding button?

Having trouble working with table tags in a cshtml page, particularly when appending tr and td elements using ajax. I'm unsure of how to delete a row when it's clicked on and also how to retrieve the values of inputs within each row.

/// <reference path="jquery-2.2.4.js"/>

$(document).ready(function () {
    $.ajax({
        type: "GET",
        url: "api/ProductsApi/GetProducts",
        success: function (Products) {
            debugger;
            let item0 = '<tr>' +
                '<th>d</th>' +
                '<th>d</th>' +
                '<th>d</th>' +
                '<th>d</th>' +
                '<th>d</th>' +
                '</tr>';
            $("#AdminProductList").append(item0);
            for (var i = 0; i < Products.length; i++) {
            var d = Products[i].split("/");
            let item = '<tr >' +
                '<td><img src="/locker/' + d[0] + ' "alt="gnjh "  style="width:70px;height:70px" /></td>' +
                '<td>'+d[3]+'</td>' +
                '<td>'+d[2]+'</td>'+
                '<td>' + d[1] + '</td>' +
                '<input id="AdminProductId'+i+'" type="hidden" value="'+d[5]+'" />'+
                '<td id="'+i+'">' +
                '<button data-toggle="tooltip" value="'+d[5]+'" class="pd-setting-ed eachEdit"><i class="fa fa-pencil-square-o" aria-hidden="true"></i><input  type="hidden" value="' + d[5] +'"/></button>' +
                
                '<button   data-toggle="tooltip" title="Trash" class="pd-setting-ed eachTrash"><i class="fa fa-trash-o" aria-hidden="true"></i></button>' +
                '</td>' +
                '</tr>';
                $("#AdminProductList").append(item);
                
        }

           
        },
        error: function (f) {
            debugger;
            alert("nashod");

        }
    });
   
})

<div id="ListPage" style="display:none" class="product-status mg-tb-15">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="product-status-wrap" style="direction:rtl;">
                    <h4>f</h4>
                    
                    <button style=" border: 0;width: 270px;padding: 10px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;display: block;text-decoration: none;text-align: center;font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size: 1.2em;color: #FFF;background: #bc3737;-webkit-box-shadow: 0 3px 1px #950d0d;-moz-box-shadow: 0 3px 1px #950d0d;box-shadow: 0 3px 1px #950d0d;" class="add-product" id="Edit"> افزودن محصول</button>
                    <table id="AdminProductList" style="direction:rtl;">
                       
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

Having trouble figuring out how to determine actions when specific rows are clicked by their ID. Any suggestions?

javascript ajax asp.net-mvc

Answer 1

Answer №1

To improve the functionality of your table, consider adding an event listener to the table rows for easy deletion:

$(document).on('click', '#AdminProductList>tr', function(){
  $(this).remove()
});

Additionally, if you need to retrieve input values from the table, there are multiple methods you can use. One approach is to loop through the input fields like this:

function getInputValues(){
 $('tr input').each(function(){
   console.log($(this).val());
 });
}

Answer 2

To improve the functionality of your table, consider adding an event listener to the table rows for easy deletion:

$(document).on('click', '#AdminProductList>tr', function(){
  $(this).remove()
});

Additionally, if you need to retrieve input values from the table, there are multiple methods you can use. One approach is to loop through the input fields like this:

function getInputValues(){
 $('tr input').each(function(){
   console.log($(this).val());
 });
}

Answer 3

Answer №2

Consider this approach:

  $.ajax({
        type:'POST',
        url:'delete.php',
        data:{del_id:del_id},
        success: function(data){
             if(data=="YES"){
                 $element.fadeOut().remove();
             }else{
                 alert("Unable to delete the item")
             }
        }

         })
    })

Answer 4

Consider this approach:

  $.ajax({
        type:'POST',
        url:'delete.php',
        data:{del_id:del_id},
        success: function(data){
             if(data=="YES"){
                 $element.fadeOut().remove();
             }else{
                 alert("Unable to delete the item")
             }
        }

         })
    })

Answer 5

Answer №3

$('button').on('click', function(){
       var row =   $(this).closest('tr');
       var inputs = row.find('input');
       alert($(inputs[0]).val());
       alert($(inputs[1]).val());
       row.remove();
    })

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>

 
  <tr>
    <td><input type="text" /></td>
    <td>Hidden value here<input type="hidden" value="test hidden" /></td>
    <td><button>Remove</button></td>
  </tr>
 
</table>

Feel free to use this code snippet

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

Alternatively, you can use the click method as shown below

<button onclick="remove(this)"  data-toggle="tooltip" title="Trash" class="pd-setting-ed eachTrash"><i class="fa fa-trash-o" aria-hidden="true"></i></button>

function remove(item){
$(item).closest('tr').remove();
}

Update: I have created a demo to retrieve input values.

 var inputs = row.find('input');
       alert($(inputs[0]).val());
       alert($(inputs[1]).val());

Answer 6

$('button').on('click', function(){
       var row =   $(this).closest('tr');
       var inputs = row.find('input');
       alert($(inputs[0]).val());
       alert($(inputs[1]).val());
       row.remove();
    })

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>

 
  <tr>
    <td><input type="text" /></td>
    <td>Hidden value here<input type="hidden" value="test hidden" /></td>
    <td><button>Remove</button></td>
  </tr>
 
</table>

Feel free to use this code snippet

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

Alternatively, you can use the click method as shown below

<button onclick="remove(this)"  data-toggle="tooltip" title="Trash" class="pd-setting-ed eachTrash"><i class="fa fa-trash-o" aria-hidden="true"></i></button>

function remove(item){
$(item).closest('tr').remove();
}

Update: I have created a demo to retrieve input values.

 var inputs = row.find('input');
       alert($(inputs[0]).val());
       alert($(inputs[1]).val());

Answer 7

Answer №4

To enable the deletion of a specific row, you must incorporate an on-click event handler for the delete button. I have made modifications to your code by including the event listener and the deletion of the element.

/// <reference path="jquery-2.2.4.js"/>

$(document).ready(function () {
    window.deleteTableRow = function (selector) { $('tr'+selector).remove(); }
    $.ajax({
        type: "GET",
        url: "api/ProductsApi/GetProducts",
        success: function (Products) {
            debugger;
            let item0 = '<tr>' +
                '<th>d</th>' +
                '<th>d</th>' +
                '<th>d</th>' +
                '<th>d</th>' +
                '<th>d</th>' +
                '</tr>';
            $("#AdminProductList").append(item0);
            for (var i = 0; i < Products.length; i++) {
            var d = Products[i].split("/");
            let item = '<tr class="data-delete-index-'+ i +'">' +
                '<td><img src="/locker/' + d[0] + ' "alt="gnjh "  style="width:70px;height:70px" /></td>' +
                '<td>'+d[3]+'</td>' +
                '<td>'+d[2]+'</td>'+
                '<td>' + d[1] + '</td>' +
                '<input id="AdminProductId'+i+'" type="hidden" value="'+d[5]+'" />'+
                '<td id="'+i+'">' +
                '<button data-toggle="tooltip" value="'+d[5]+'" class="pd-setting-ed eachEdit"><i class="fa fa-pencil-square-o" aria-hidden="true"></i><input  type="hidden" value="' + d[5] +'"/></button>' +

                '<button onclick="deleteTableRow(\'.data-delete-index-'+ i +'\')"   data-toggle="tooltip" title="Trash" class="pd-setting-ed eachTrash"><i class="fa fa-trash-o" aria-hidden="true"></i></button>' +
                '</td>' +
                '</tr>';
                $("#AdminProductList").append(item);

        }



        },
        error: function (f) {
            debugger;
            alert("nashod");

        }
    });

})

Answer 8

To enable the deletion of a specific row, you must incorporate an on-click event handler for the delete button. I have made modifications to your code by including the event listener and the deletion of the element.

/// <reference path="jquery-2.2.4.js"/>

$(document).ready(function () {
    window.deleteTableRow = function (selector) { $('tr'+selector).remove(); }
    $.ajax({
        type: "GET",
        url: "api/ProductsApi/GetProducts",
        success: function (Products) {
            debugger;
            let item0 = '<tr>' +
                '<th>d</th>' +
                '<th>d</th>' +
                '<th>d</th>' +
                '<th>d</th>' +
                '<th>d</th>' +
                '</tr>';
            $("#AdminProductList").append(item0);
            for (var i = 0; i < Products.length; i++) {
            var d = Products[i].split("/");
            let item = '<tr class="data-delete-index-'+ i +'">' +
                '<td><img src="/locker/' + d[0] + ' "alt="gnjh "  style="width:70px;height:70px" /></td>' +
                '<td>'+d[3]+'</td>' +
                '<td>'+d[2]+'</td>'+
                '<td>' + d[1] + '</td>' +
                '<input id="AdminProductId'+i+'" type="hidden" value="'+d[5]+'" />'+
                '<td id="'+i+'">' +
                '<button data-toggle="tooltip" value="'+d[5]+'" class="pd-setting-ed eachEdit"><i class="fa fa-pencil-square-o" aria-hidden="true"></i><input  type="hidden" value="' + d[5] +'"/></button>' +

                '<button onclick="deleteTableRow(\'.data-delete-index-'+ i +'\')"   data-toggle="tooltip" title="Trash" class="pd-setting-ed eachTrash"><i class="fa fa-trash-o" aria-hidden="true"></i></button>' +
                '</td>' +
                '</tr>';
                $("#AdminProductList").append(item);

        }



        },
        error: function (f) {
            debugger;
            alert("nashod");

        }
    });

})

Is there a way to remove the row after hitting its corresponding button?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Jquery Ajax failing to retrieve a response

JavaScript events for scrolling horizontally and vertically across multiple browsers

Is it possible for issues to arise when serving a web app using the "Globals" module in the Mean Stack?

The hover feature on my website is making the picture flicker

Tips for creating a script that is compatible with both Java and C++

How can you retrieve input values from a form using a button click but without requiring a

The Ajax request header is set to content-type application/json on the development server, but on the production server it is

JQuery and Fancybox causing issues when triggered on Internet Explorer 8

Break up every word into its own separate <span>

There is an issue with the JSON format being received by fetch in JS when using json_encode in php

`"Unable to execute the 'ng build --env=prod' command"`

Object contents shift upon my first gaze

Viewing saved information prior to saving - JavaScript

The AJAX response shows a value of "undefined"

Using Vue's v-if statement to determine if a variable is either empty or null

It is necessary for ReactJS eslint rules to employ destructuring when assigning state

What are the steps to implement Vuelidate 2 in a web browser?

The jQuery pop-up fails to activate on the initial click

I'm a beginner when it comes to working with MongoDB and I'm looking to insert a new field into a specific document. Can anyone advise me on how to accomplish this using Node

dividing an HTML string into individual variables using JavaScript