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有效，但我的删除功能不起作用。什么阻止我的代码正常工作？＆＃39; getAddBtn＆＃39;每次点击它都会给我一个额外的输入字段，现在我想让我的removeBtn做同样的事情，但这次它应该每次删除一个输入字段。一张图片澄清：请注意蓝色的小＆＃34;添加＆＃34;标志！这将提供额外的输入字段！绿色大按钮不涉及问题！当单击蓝色按钮时，它会继续添加和添加输入字段，但如果您单击它太多次而又想要删除它，该怎么办？我希望这个小编辑有助于理解我的意思。 I hope this gives a bit more clarification

Answer 1

根据jquery docs，删除可以通过以下几种方式完成：

来自文档的示例：

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

选项1：

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

选项2：

<input type="button" id="btn" value="Box 1" onclick="changeColor(this)">
<input type="button" id="btn" value="Box 2" onclick="changeColor(this)">
<input type="button" id="btn" value="Box 3" onclick="changeColor(this)">

<script>
    function changeColor(this) {
        this.document.getElementById("btn").style.backgroundColor = "red";
    }
</script>

因此，将class属性添加到要删除的html元素中使用上述语法之一删除它。

Answer 2

你需要在这里做一些事情。您必须将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
  })

但是为了能够选择那些input，我在您的输入中创建了一个额外的syllable类：'class': 'form-group form-control syllable'并将其作为参考来选择每个syllable您可以在我的代码中看到输入：$(this).parent().children("input.syllable");

JavaScript删除功能不起作用

2 个答案: