javascript - 单击关闭图标后如何删除具有相同类名的当前列表项

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

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>