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

问题描述

我有以下代码，可通过单击链接（类似于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();
      });

但它似乎不起作用...

谢谢！

解决方法

事件处理程序将附加到页面加载上的所有元素。由于已添加图标，因此正确的方法如下：

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>

,

您可以在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>