my javascript delete button not working

Question

Here you can see what I mean please note the blue + sign that's what I'm talking about

to start off, this was a post I deleted because I was a mess, so I deleted it and made a new one make sure it looks a bit decent (as far as I could). I am trying to make a delete button but when I implement the delete button it prevents my script from running (most likely an error) if u take a look at the picture you can see a button that's green and a button that's blue. The blue button adds one input field when clicked on. that's the "getAddBtn", as u can see in the picture. However, I now made a function called "getRemoveBtn" and this should do the same like the blue button but reverse. It should delete one input field... in case you had clicked on the blue button too often. I tried putting my "getRemoveBtn" in the piece of code:

"$(eBlock).append(getAudioBtn(i), getWordInput(i), getWordPartInput(i),getAddBtn(eBlock, i));

return eBlock; }"

but when I do it messes up every functionality and it displays an empty page with just my css/bootstrap. either I am NOT implementing the code in the right way in the piece of code that should or my code straight up sucks. Both possibilities could because I am quite new to javascript. I would like to have the button work the exact same way as the blue button but then remove one input field instead of adding one.

$(document).ready(function(){
var id = 0;
var addOpdracht = $('<a/>', {
   'class': 'btn btn-success',
   'id': 'addOpdracht'
}).on('click', function(){
    $('.panel-body').append(getExerciseBlock(id));
    id++;
}).html('<i class="fa fa-plus"></i>');

$('.jumbotron').append(addOpdracht);
 })


 function getAddBtn(target, i){
 var addBtn = $('<a/>', {
                'class': 'btn btn-primary'
            }).on('click', function(){
              $(target).append(getWordPartInput(i));
            }).html('<i class="fa fa-plus"></i>');
            console.log(target);
 return addBtn;
  }


 function getRemoveBtn(target, i){
 var removeBtn = $('<a/>', {
                'class': 'btn btn-primary'
            }).on('click', function(){
              $(target).empty(getWordPartInput(i));
            }).html('<i class="fa fa-plus"></i>');
            console.log(target);
return removeBtn;
 }



 function getExerciseBlock(i){
   var eBlock = $('<div/>',{
   'id': i,
   'class': 'col-md-12'
 });

 $(eBlock).append(getAudioBtn(i), getWordInput(i), 
 getWordPartInput(i),getAddBtn(eBlock, i));

  return eBlock;
}


  function getAudioBtn(id, cValue){
    cValue = cValue || '';
    var audioBtn = $('<a/>', {
                'class': 'btn btn-primary'
            }).html('<i class="fa fa-volume-up"></i>');
  return audioBtn;
 }


 function getWordInput(id, cValue){
   cValue = cValue || '';
 var wInput = $('<input/>', {
                'class': 'form-group form-control',
                'type': 'text',
                'name': 'question_takeAudio_exerciseWord[]',
                'placeholder': 'Exercise',
                'id': 'exerciseGetWordInput'
            })
  return wInput;
}


function getWordPartInput(id, cValue){
   cValue = cValue || '';
   var wpInput = $('<input/>', {
                  'class': 'form-group form-control',
                  'type': 'text',
                  'value': cValue,
                  'placeholder': 'Syllables',
                  'id': 'SyllablesGetWordPartInput'
              });
 return wpInput;
}