Question

我正在开展一个小项目，我正在创建一个删除功能，删除所谓的＆＃34;练习块＆＃34;。这些块具有递增的ID 问题：该功能似乎不起作用（很可能是我自己的错，我是javascript / jquery的新手）。

我希望能做什么：当我点击按钮时，它应该带有递增数字的eBlock，所以基本上它应该只针对其父元素。

是你自己尝试的小提琴。我正在谈论带有X的红色按钮。不是带减号的那个。你们很可能会发现它自己，但是为了节省时间和困惑：你首先必须点击绿色+按钮，这样就会弹出一个全新的块。 https://jsfiddle.net/DanDy/sa2eowhh/4/

所有相关代码：

$(document).ready(function() {
  var id = 0;
  var addOpdracht = $('<a/>', {
    'class': 'btn btn-success',
    'id': 'addOpdracht'
  }).on('click', function() {
    $('form').append(getExerciseBlock(id));
    $(".exerciseGetWordInput_" + id).focus().select();
    id++;
    exerciseAudioInput++;
  }).html('<i class="fa fa-plus fa-2x"></i>');

  $('form').append(addOpdracht);
  $('form').append(getExerciseTitle());
});


function getRemoveBtnExercise(target, i){
  var RemoveExerciseBtn = $('<a/>', {
  'class': 'btn btn-danger'
 }).on('click', function(){           
   let exerciseInputs = exerciseInputs[exerciseInputs.length-1].remove(target);
  }).html('<i class="fa fa-close"></i>');

return RemoveExerciseBtn;
}


 //the block where the fields get append to.
  function getExerciseBlock(i){
  var eBlock = $('<div/>',{
    'id': i,
    'class': 'col-md-12 eBlock'
  });

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

  return eBlock;
}

创建应该删除块的按钮的代码：

function getRemoveBtnExercise(target, i){
  var RemoveExerciseBtn = $('<a/>', {
  'class': 'btn btn-danger'
 }).on('click', function(){           
   let exerciseInputs = exerciseInputs[exerciseInputs.length-1].remove(target);
  }).html('<i class="fa fa-close"></i>');

return RemoveExerciseBtn;
}

亲切的问候，

Answer 1

这是：将删除功能更改为：

function getRemoveBtnExercise(target, i){
    var RemoveExerciseBtn = $('<a/>', {
        'class': 'btn btn-danger removeBtn'
    }).html('<i class="fa fa-close"></i>');

    return RemoveExerciseBtn; 
}

然后因为删除btn很晚才创建，jquery不会动态找到它，所以你必须委托事件。

委托事件的优势在于它们可以处理来自稍后添加到文档的后代元素的事件。

$(document).on("click", ".removeBtn",function() {
    $(this).parent().remove();
});

您的小提琴中的resetInput不会触发，因此您可以使用jquery代替

$('#resetInputs').on('click', function ()) {
    location.reload();
});

Answer 2

您的变量 exerciseInputs 未定义，但我已更新您的代码。

<强> 从

let exerciseInputs = exerciseInputs[exerciseInputs.length-1].remove(target);

<强> 到

$('#' + target).remove();

您可以在此处找到更新的代码：

https://jsfiddle.net/oaL2sfme/

创建了一个无效的删除功能

2 个答案: