javascript - 我的 javascript 删除按钮不起作用

Question

在这里你可以看到我的意思请注意我所说的蓝色+号

首先，这是我删除的帖子，因为我一团糟，所以我删除了它并制作了一个新的，以确保它看起来有点像样（尽我所能）。我正在尝试制作一个删除按钮，但是当我实现删除按钮时，它会阻止我的脚本运行（很可能是一个错误），如果你看一下图片，你会看到一个绿色的按钮和一个蓝色的按钮。单击蓝色按钮会添加一个输入字段。这就是“getAddBtn”，如图所示。但是，我现在创建了一个名为“getRemoveBtn”的函数，它应该和蓝色按钮一样，但相反。它应该删除一个输入字段...以防您过于频繁地单击蓝色按钮。我试着把我的“getRemoveBtn”放在一段代码中：

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

返回 eBlock；}"

但是当我这样做时，它会弄乱所有功能，并显示一个只有我的 css/bootstrap 的空白页面。要么我没有在应该的代码中以正确的方式实现代码，要么我的代码直接很糟糕。这两种可能性都可能是因为我对 javascript 很陌生。我想让按钮以与蓝色按钮完全相同的方式工作，然后删除一个输入字段而不是添加一个。

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

标签： javascripthtml