Функция удаления JavaScript не работает

Question

Я работаю над небольшим проектом, у которого есть функция, которая не работает!Это моя функция удаления:

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

Часть, которая не работает:

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

getBtn работает, но моя функция удаления не работает.Что мешает моему коду работать правильно?'GetAddBtn' дает мне дополнительное поле ввода каждый раз, когда я нажимаю на него, теперь я пытаюсь заставить мои removeBtn делать их одинаковыми, но на этот раз он должен удалять одно поле ввода каждый раз.Картинка для уточнения: обратите внимание на синий маленький знак «добавить»!это обеспечит дополнительные поля ввода!зеленая большая кнопка не связана с проблемой!когда нажимается синяя кнопка, она продолжает добавлять и добавлять поля ввода, но что, если вы нажмете ее слишком много раз и захотите удалить одно?Я надеюсь, что этот маленький EDIT немного помог в понимании того, что я имею в виду.

Answer 1

Вам нужно сделать несколько вещей здесь. Вы должны изменить свою функцию getRemoveBtn на что-то вроде этого:

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

Это в основном удаляет только входы из div, где кнопка удаления: $(this).parent().children("input.syllable").

Второе, что вам НЕ следует делать , это назначить идентичные идентификаторы в ваших getWordPartInput и getWordInput функциях. Цель id - быть уникальным в вашем HTML-документе:

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

Но чтобы иметь возможность выбрать эти input s, я создал дополнительный класс syllable для ваших входов: 'class': 'form-group form-control syllable' и использовал его в качестве ссылки для выбора каждого syllable ввода, как вы можете видеть в моем код: $(this).parent().children("input.syllable");

Answer 2

Согласно jquery docs , удалить можно сделать несколькими способами:

Пример из документов:

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
</div>

Вариант 1:

$( ".hello" ).remove();

Вариант 2:

$( "div" ).remove( ".hello" );

Итак, добавьте атрибут класса к HTML-элементу, который вы хотите удалить, и используйте один из приведенных выше синтаксисов, чтобы удалить его.