Question

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

开始，这是我删除的帖子，因为我是一团糟，所以我删除了它并制作了一个新的确保它看起来有点像样（尽我所能）。我正在尝试创建一个删除按钮，但当我实现删除按钮时，它会阻止我的脚本运行（很可能是一个错误），如果你看一下图片，你可以看到一个绿色的按钮和一个按钮＃39; s蓝色。单击时，蓝色按钮会添加一个输入字段。是的＆＃34; getAddBtn＆＃34;，你可以在图片中看到。但是，我现在创建了一个名为＆＃34; getRemoveBtn＆＃34;这应该像蓝色按钮一样反向。它应该删除一个输入字段...如果您经常点击蓝色按钮。我试着把我的＆＃34; getRemoveBtn＆＃34;在这段代码中：

＆＃34; $（eBlock）.append（getAudioBtn（i），getWordInput（i）， getWordPartInput（i），getAddBtn（eBlock，i））;

返回eBlock; }＆＃34;

但是当我这样做会弄乱每个功能时它会显示一个只有我的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;
}

我的javascript删除按钮不起作用

0 个答案: