Q: How to call the onclick function from markup by using jQuery? i fetched a form with a data in it from mysql and when i wanted to delete the form from the button used ajax to delete the data from the database and form. so i created onclick function. the query runs sucessfully but the onclick function is not being called.
this is my markup
<div id="education">
    <div class="cvform edu-14">
        <input type="text" name="course-title-14" placeholder="Your course name"value="">
        <input type="text" name="course-inst-14" placeholder="Your Institution's name" value="">
        <input type="text" name="course-begin-14" placeholder="Course start year" value="">
        <input type="text" name="course-end-14" placeholder="Course ended. Blank for present" value="">
        <textarea name="course-detail-14" id="" cols="30" rows="10" placeholder="Add your course Details"></textarea>
        <a href="javascript:;"  onclick='removeEduPressed();'  class="links remedu" id="edu-14">Remove</a>
    </div>
</div>

this is the onClick function
function removeEduPressed() {
    $('.edu-14').remove();
}

and this is the ajax call
$(".remedu").click(function (event) {
    var str = event.target.id;
    var eduId = str.slice(4, str.length);//equals 14
    $.ajax({
        type: "POST",
        url: "posts/process.php",
        data: {
            eduId: eduId
        },
        success: (data) => {
        }
    });
});


A: You can use the jquery to remove the div with class name class="cvform edu-14"
$("#edu-14").click(function () {
   $('.edu-14').remove();
});

use the above code instead of function calling on click.
here is the link of working code.
http://jsfiddle.net/gsLbuhed/

A: Just make sure that you have previously defined the function removeEduPressed, if the function is inside of a $(document).ready, when you are declaring the onclick the function going to be undefined, do you have this on your code?
    $(document).ready(function () {
        function removeEduPressed() {
            $('.edu-14').remove();
        }
    });

Like that you are going to get this on the console inspector of your browser: ReferenceError: removeEduPressed is not defined[Learn More]
Just put declare the function before the form
function removeEduPressed() {
  $('.edu-14').remove();
}


A: Did you try using this ?
$(".remedu").click(function(event){
    var str=$(this).attr('id');
    var eduId=str.split('-')[1];//equals 14
    $.ajax({
        type: "POST",
        url: "posts/process.php",
        data: {
            eduId: eduId
        },
        success: (data) => {
        }
    });
});

Also you could execute the remove after ajax execution getting a JSON reponse as example:
$(".remedu").click(function(event){
    var str=$(this).attr('id');
    var eduId=str.split('-')[1];//equals 14
    $.ajax({
        type: "POST",
        url: "posts/process.php",
        data: {
            eduId: eduId
        },
        success: (data) => {
            /*
                if(data.removeEdu)
                    $('.edu-14').remove();
            */
        }
    });
});

It's only an example, you can customize it.
