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

Question

我有以下代码，通过单击 link（类似于 Google 任务）在容器 (#subtask_container) 中添加 divs：

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 class 添加什么逻辑才能删除它的关联输入？

我试过了

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

但是好像不行...

谢谢！

Answer 1

事件处理程序附加到页面加载中的所有元素。由于附加了图标，正确的方法如下：

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 removeIcon"></i><br></div>');
  i++;
});

$(document).on('click', '.removeIcon', function(){
  $(this).parent().remove();
});

<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>

Answer 2

您可以在 div 中简单地 wrap 您的 subtask append 并在其上简单地使用 .parent() 和 .remove() 函数。无需使用 <br>

此外，请勿将 .fa-times 用作主要 click 事件处理程序，因为您可能在同一页面上还有其他 fa-times，这可能会在以后引起问题。将自定义 class 添加到您的 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>

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

Remove input by clicking times icon

javascript

jquery

font-awesome