Item deletion using jquery ajax

Question

Am having a problem with my jquery

i want to delete some products

but the only problem am getting, the deletion works only on first items even if i click the last item

Lets say i want to delete <p>INFO 20002</p> it will delete <p>INFO 2000</p>

i want to be able to delete any item i want

<script>
   function callB() {
    
    $("#button1").click(function(event) {
        Execute();
    });
   
    function Execute() {
        
        $.ajax({
            type: 'POST',
            url: 'ajax/file.aspx',
            data: {
                'custId': $("input[name='custId']").val()
            },
            success: function(response) {
                    
            },
            error: function() {
                alert("error");
            }
        });
    };
   }
   
   $(document).ready(function() {
    callB();
   });
</script>



<div>
<p>INFO 2000</p>
<input type="button" id="button1" value="Erase this">
 <input type="hidden" name="custId" value="348700">
</div>

<div>
<p>INFO 20001</p>
<input type="button" id="button1" value="Erase this">
<input type="hidden" name="custId" value="4443487">
</div>

<div>
<p>INFO 20002</p>
<input type="button" id="button1" value="Erase this">
<input type="hidden" name="custId" value="8883487">
</div>

<div>
<p>INFO 20003</p>
<input type="button" id="button1" value="Erase this">
<input type="hidden" name="custId" value="1113487">
</div>

All your buttons have the same id. It's supposed to be unique though. Here's the fix: jsfiddle.net/k1a3ufb8 — user5734311
– user5734311, Commented Jan 20, 2022 at 17:58

user8193706 · Accepted Answer · 2022-01-20 18:16:37Z

Because all your button have same ids i.e. button1 and when you click any button your function Execute(); executed and inside your ajax data you are sending data with $("input[name='custId']").val() means it will always give you the value of first occurrence and that is why when clicking any button because all your buttons have same ids the Execute() function executed and your first item deleted.So when you click any button send that clicked button value your problem will be solved. Also please try to give the id value unique.

$("[type=button]").on('click', function() {
     var custId = $(this).closest('div').find('[name=custId]').val();
     Execute(custId);
});

function Execute(custId) {
    
    $.ajax({
        type: 'POST',
        url: 'ajax/file.aspx',
        data: {
            'custId': custId
        },
        success: function(response) {
                
        },
        error: function() {
            alert("error");
        }
    });
}

Troy Niemeier · Accepted Answer · 2022-01-20 18:13:02Z

Your input buttons need to have unique id attributes (or no ids at all, in this case).
Give all of them the same class-name.

<input type="button" class="deleteButton" value="Erase this" />

Put the customer id into the 'button' element, instead of its own hidden input.

<input type="button" class="deleteButton" value="Erase this" data-custid="348700" />

Then update your jquery selector for the button click event, and refer to that class-name.

$('input.deleteButton').on('click', function(event) {

  var $button = $(this);
  // USE THE jQUERY OBJECT'S .data() METHOD TO GET THE BUTTON's CUST-ID
  // var customerId = $button.data('custid');
  Execute($button);

});

Then, on the 'success' of the ajax request, refer to the '$button' object, and remove its <div> parent.

$button.closest('div').remove();

Collectives™ on Stack Overflow

Item deletion using jquery ajax

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related