How to call the onclick function from markup by using jQuery?

Question

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) => {
        }
    });
});

Answer 1

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/

Answer 2

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();
}

Answer 3

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.