JavaScript delete function not working

Question

I am working on a small project where I have a function that doesn't seem to work! It's my delete function:

$(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-danger'
            }).on('click', function(){
              $(target).remove(getWordPartInput(i));
            }).html('<i class="fa fa-minus"></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), 
getRemoveBtn(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;
}

The part that doesn't work is:

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

The getBtn works, but my remove functionality does not work. What is it that prevents my code from working properly? The 'getAddBtn' gives me one input field extra each time I click on it, now I am trying to make my removeBtn do they same but this time it should remove one input field each time. A picture to clarify: please note the blue little "add" sign! that will provide extra input fields! the green big button isn't involved in the problem! when the blue button is being clicked it keeps on adding and adding input fields, but what if you click it too many times and you want to delete one? I hope this little EDIT helped a bit more in understanding what I mean.

Answer 1

You need to do few things here. You have to change your getRemoveBtn function to something like this:

function getRemoveBtn(target, i){
  var removeBtn = $('<a/>', {
      'class': 'btn btn-danger'
   }).on('click', function(){ 

       /* Select all inputs by going to parent first 
          and then selecting all child inputs with class 'syllable'
          I have added this class in your getWordInput() function
          as noted bellow  
       */             
       let syllableInputs = $(this).parent().children("input.syllable");

       /*
          Now when you have ALL inputs of specific div
          remove the last one.
       */
       syllableInputs[syllableInputs.length-1].remove(target);

   }).html('<i class="fa fa-minus"></i>');
}

That basically removes only the inputs from div where remove button is: $(this).parent().children("input.syllable").

Second thing you should NOT do is to assign same ids in your getWordPartInput and getWordInputfunctions. The purpose of id is to be unique in your html document:

  var wInput = $('<input/>', {
            'class': 'form-group form-control', // Add class here instead of id
            'type': 'text',
            'name': 'question_takeAudio_exerciseWord[]',
            'placeholder': 'Exercise',
            'id': 'exerciseGetWordInput' // Don't do this. Use class
  })

But to be able to select those inputs I've created an additional syllable class in your inputs : 'class': 'form-group form-control syllable' and used that as a reference to pick every syllable input as you can see in my code: $(this).parent().children("input.syllable");