单击关闭图标

Question

我想在点击其关闭图标后删除当前列表项。我正在使用javascript函数添加列表项。请检查图像和我的代码以供参考。提前谢谢。

代码如下：

function addServices() {
  var service = $.trim($('#services').val());
  if (service != "") {
    var value = $('<li class="service-name" onclick="removeServices()">' + service + '<i class="fa fa-times" aria-hidden="true" alt="Remove icon" title="Remove"></i></li>');
    $('.products-list').append(value).children(':last').hide().fadeIn(400);
  }
};

function removeServices() {
  $(this).parent().remove();
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4 class="heading">3. Buisness Products & Services* - <span class="subheading">Enter all services that your business offers (Max 
             80 charcters)</span></h4>
<input type="text" id="services" name="tagline" maxlength="60" required="" placeholder="Enter products and services your business 
             offers." />
<input type='button' value='+ Add' id='add' onclick="addServices()" class="add" />

<ul class="products-list col-xs-12" id='list'></ul>
<div class="both"></div>

感谢这个社区的所有天才编码员。鞠躬!!!

Answer 1

使用Javascript而不是HTML属性（与eval一样糟糕）正确附加侦听器。此外，您当前的HTML字符串需要修复 - 最后一行需要一个起始'（而倒数第二行需要一个' +）

如果您发现难以处理的报价，您可能只使用模板文字：

function addServices() {
  var service = $.trim($('#services').val());
  if (service === "") return;
  var li = $(`<li class="service-name">
    ${service}<i class="fa fa-times" aria-hidden="true"
    alt="Remove icon" title="Remove"></i></li>`);
    li.click(removeServices);
  $('.products-list').append(li).children(':last').hide().fadeIn(400);
}

function removeServices() {
  $(this).parent().remove();
}

Answer 2

1.删除<li>添加代码中不必要的空格。

2.您需要在this函数中传递onclick，然后才会有效： -

 function addServices() {
     var service = $.trim($('#services').val());
     if (service != "") {
     //remove unnecessary spaces from below line
     var value = $('<li class="service-name" onclick="removeServices(this)">' +service + '<i class="fa fa-times" aria-hidden="true" alt="Remove icon" title="Remove"></i></li>');

     $('.products-list').append(value).children(':last').hide().fadeIn(400);
   }
 };

  function removeServices(ele) {
     $(ele).parent().remove(); // or try $(ele).remove();
  };

工作代码段： -

function addServices() {
   var service = $.trim($('#services').val());
   if (service != "") {
   var value = $('<li class="service-name" onclick="removeServices(this)">' +service + '<i class="fa fa-times" aria-hidden="true"  alt="Remove icon" title="Remove"></i></li>');
   $('.products-list').append(value).children(':last').hide().fadeIn(400);
 }
};

function removeServices(ele) {
   $(ele).parent().remove(); // or try $(ele).remove();
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<h4 class="heading">3. Buisness Products & Services* - <span class="subheading">Enter all services that your business offers (Max 
             80 charcters)</span></h4>
<input type="text" id="services" name="tagline" maxlength="60" required="" placeholder="Enter products and services your business 
             offers." />
<input type='button' value='+ Add' id='add' onclick="addServices()" class="add" />

<ul class="products-list col-xs-12" id='list'></ul>
<div class="both"></div>

Answer 3

我玩了一些你的代码。

这是一个包含评论的工作片段：

＆＃13;

＆＃13;

function addServices() {
  var service = $.trim($('#services').val());
  if (service != "") {
    var value = $('<li class="service-name">' + service + '<i class="fa fa-times" aria-hidden="true" alt="Remove icon" title="Remove"></i></li>');
    $('.products-list').append(value).children(':last').hide().fadeIn(400);
  }
};

// This one is better than using the inline "onclick"
// #list is a fix element,  These are dynamic ones
// ↓                         ↓
$('#list').on('click', '.service-name .fa-times', function() {
  $(this).parent().remove();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<h4 class="heading">3. Buisness Products & Services* - <span class="subheading">Enter all services that your business offers (Max 
             80 charcters)</span></h4>
<input type="text" id="services" name="tagline" maxlength="60" required="" placeholder="Enter products and services your business 
             offers." />
<input type='button' value='+ Add' id='add' onclick="addServices()" class="add" />

<ul class="products-list col-xs-12" id='list'></ul>
<div class="both"></div>

＆＃13;

＆＃13;

＆＃13;

希望它有所帮助。

Answer 4

只需使用

$('#services').on('click','li i',function()
  $(this).parent().remove();
});

Answer 5

这很简单，但您可以看到以下链接并更改您的代码。 JsFiddle Sample 我希望有帮助

// find elements
var $list = $(".list");
var $list_item = $(".list-item i");

$list_item.each(function() {
  $(this).on('click', function() {
    $(this).parent().remove();
  });
});

Answer 6

尝试使用.click（），而不是使用 removeServices（）

$('.service-name i').click(function(){
    $(this).parent().remove();
});