javascript - 通过单击时间图标删除输入

Question

我有以下代码通过单击链接(类似于 Google Tasks)在容器(#subtask_container)中添加 div:
HTML:

<p class="text-muted">
    <i class="fas fa-tasks mr-2"></i>
    <a href="#" id="add_subtask">Add subtasks</a>
</p>
<div id="subtask_container"></div>

JS(这成功地在子任务容器 div 中添加了唯一输入以及每个输入后的可点击 x)

var i = 1
      $("#add_subtask").click(function () {
  $("#subtask_container").append('<input name="subtask'+i+'" class="mt-1" id="subtask'+i+'" placeholder="Enter subtask"><i class="fas fa-times ml-1 text-muted"></i><br>');
        i++;
});

我需要向 x 类添加什么逻辑才能删除它的关联输入？
我试过了

$('.fa-times').click(function(){
        $(this).prev('input').remove();
      });

但它似乎不起作用......
谢谢!

Answer 1

您可以简单地wrap您的 subtask append在 div只需使用 .parent()和 .remove()功能。无需使用<br>另外，不要使用 .fa-times作为主要 click事件处理程序，因为您可能有其他 fa-times在同一页面上，这可能会在以后引起问题。将自定义类添加到您的 fa项目(.subtask_remove_icon)
现场演示:

var i = 1
$("#add_subtask").click(function() {
  $("#subtask_container").append('<div><input name="subtask' + i + '" class="mt-1" id="subtask' + i + '" placeholder="Enter subtask"><i class="fas fa-times ml-1 text-muted subtask_remove_icon"></i></div>');
  i++;
});

$(document).on('click', '.subtask_remove_icon', function() {
  $(this).parent().remove(); //remove the input when X clicked
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>

<p class="text-muted">
  <i class="fas fa-tasks mr-2"></i>
  <a href="#" id="add_subtask">Add subtasks</a>
</p>
<div id="subtask_container"></div>