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 做同样的事情，但这次它应该每次都删除一个输入字段。 图片澄清：请注意蓝色的小“添加”标志！这将提供额外的输入字段！绿色大按钮与问题无关！当单击蓝色按钮时，它会不断添加和添加输入字段，但是如果单击太多次并且想要删除一个怎么办？我希望这个小编辑有助于更多地理解我的意思。

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

但是为了能够选择那些 inputs，我在您的输入中创建了一个额外的 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 元素添加一个类属性，然后 使用上述语法之一将其删除。