Delete single item using Ajax and jQuery

Question

Please I need to delete item from my website using jQuery and ajax but I don't know how to get the particular id of what I want to delete or less is single see below example:

HTML CODE

<span id="file-1">Orange</span> <a id="delete-1">Delete</a>
<span id="file-2">Orange</span> <a id="delete-2">Delete</a>
<span id="file-3">Orange</span> <a id="delete-3">Delete</a>
<span id="file-4">Orange</span> <a id="delete-4">Delete</a>
<span id="file-5">Orange</span> <a id="delete-5">Delete</a>
<!--Next item will have id of 6 is looping...-->

AJAX JQUERY

<script>
    $(document).ready(function(e){
        $("#delete-").click(function(){
//Am confused here how to know which id need to be deleted?
var id = $('#file-').val();
        $.ajax({
        url:'/delete_reply.php',
        data:'id='+id,
        type: "POST",
        beforeSend: function(){
        $('#comment-'+id'').attr('class', 'deleting');
        },
        success: function(data){
            $('#comment-'+id'').hide();
            $(#comment-'+id'').css('display','none'); 

        }
          });
          });
    });
</script>

Please I don't know how to pass the id of the content I want to delete to the ajax can someone help me?

Do you want to delete the anchor tag which was clicked? Or you want to identify which of anchors was clicked out of those 5 and send that delete request? — Niks
– Niks, Commented Jun 1, 2016 at 12:13
@NikhilPatil I think OP wants to delete a corresponding entry from the database otherwise why use AJAX? — dimlucas
– dimlucas, Commented Jun 1, 2016 at 12:14
Yes, i want to delete the span with the same id of delete button @NikhilPatil — Micheal
– Micheal, Commented Jun 1, 2016 at 12:15

Alok Patel · Accepted Answer · 2016-06-01 12:34:32Z

3

UPDATE:

It's good approach to assign value to HTML element using data attributes.
For that HTML and jQuery both would look something like follow.

HTML:

<span id="file-3">Orange</span> <a data-fileid="3" class="cmnDeleteFile">Delete</a>

JQUERY

$(".cmnDeleteFile").click(function(e){
    e.preventDefault();

    var id=$(this).data('fileid');
    // This is how you get id of the file from same element using data attribute.

});

Old answer:

You're following wrong method. Give every link common CSS class and fire trigger event on click of a link like this.

HTML:

<span id="file-3">Orange</span> <a id="3" class="cmnDeleteFile">Delete</a>

JQUERY

$(".cmnDeleteFile").click(function(e){
    e.preventDefault();

    var id=$(this).attr('id');
    // This is how you get id of the file from same element.

});

edited Jun 1, 2016 at 12:34

answered Jun 1, 2016 at 12:14

Alok Patel

8,0726 gold badges35 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Micheal Over a year ago

Okay boss wait i check the method

Niks Over a year ago

@Alok: I agree with your overall approach but not with your naming scheme for id. You have two elements here with id 3 and that will cause problems sometime or the other (and of course, it's invalid html)

Alok Patel Over a year ago

@NikhilPatil Yeah we generally use data- to assign values to html elements, but it is much cleaner then the current approach or doing split. And off course file won't have the same ID as link, that was typo, corrected in my last edit.

Niks Over a year ago

@Alok Yup, using data- would be much better than both approaches. Perhaps you should update your answer with that

Alok Patel Over a year ago

@NikhilPatil yeah that's nice idea, updated the answer.

Niks · Accepted Answer · 2016-06-01 12:17:36Z

1

Replace your

var id = $('#file-').val();

with

var id=$(this).attr('id').split("-")[1];

Btw, I haven't tested rest of your code. Particularly, your #delete- selector that you have used for binding click event.

answered Jun 1, 2016 at 12:17

Niks

4,8604 gold badges39 silver badges57 bronze badges

Collectives™ on Stack Overflow

Delete single item using Ajax and jQuery

2 Answers 2

UPDATE:

Old answer:

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

UPDATE:

Old answer:

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related