JavaScript在单击时从列表中删除字符串(如果已经存在）

JavaScript remove string from list on click if already exist

本文关键字：如果存在字符串删除单击列表 JavaScript 更新时间：2023-10-24

我在点击时从列表中添加和删除项目时遇到问题。删除功能只能工作一次。

HTML

<h1 id="show-list></h1>
<ul id="my-list>
    <li data-itemname="C1">C1</li>
    <li data-itemname="B23">B23</li>
    <li data-itemname="D52">D54</li>
   ...

JS-

$('#my-list').each(function() {
var $widget = $(this),
    $itemname = $(this).attr('data-itemname'),
    ...
$widget.on('click', function() {
  $currentlist = document.getElementById('show-list').innerHTML;
  // create current list array
  var str = $currentlist; // C1, B23, D54, etc
  var array = str.split(',');
  // convert item number to string
  var itemtocheck = $itemname.toString(); // works OK
  // check if value in array
  var result = $.inArray(itemtocheck, array); // so far so good
  if (result == 0) {
    selecteditems = $currentlist.replace(itemtoremove+',', ''); 
    $('#show-list').html(selecteditems); // Works only once
    return false;
  } else {
    $('#show-list').append($itemname+','); // will add OK
    return false;
  }
});
...

我还觉得这个功能可以简化吗？

编辑：重写

var $showList = $('#show-list');
$('#my-list').find('li').click(function () {
    var $this = $(this);
    var itemName = $this.data('itemname');
    var showListText = $showList.text();
    var showListItems = showListText.split(',');
    var itemIndex = showListItems.indexOf(itemName);
    if (itemIndex > -1) {
        // remove item
        showListItems.splice(itemIndex, 1);
    } else {
        // append item
        showListItems.push(itemName);
    }
    showListText = showListItems.filter(function (a) { return !!a; }).join(',');
    $showList.text(showListText);
});

jsfiddle

编辑3：仅从最佳实践的角度来看，我在jQuery对象前面加上$，而不加其他前缀。我觉得它使代码可读性更强，并允许您给变量一个"类型"，这样您就永远知道什么是什么。

这就是您所需要的吗？我会跳过先转换为数组。另外，您的代码中的$itemname是什么？

<html>
    <head>
        <script>
            function removeItemFromList(listName, itemName) {
                var selectobject=document.getElementById(listName);
                for (var i=0; i<selectobject.length; i++){
                    if (selectobject.options[i].value == itemName) {
                        selectobject.remove(i);
                    }
                }
            }
            function addItemToList(listName, itemName, itemValue) {
                var selectobject=document.getElementById(listName);
                var found = false;
                for (var i=0; i<selectobject.length; i++){
                    if (selectobject.options[i].value == itemValue) {
                        found = true;
                        // already in list, don't re-add
                        break;
                    }
                }
                if (!found) {
                    var option = document.createElement("option");
                    option.text = itemName;
                    option.value = itemValue;
                    selectobject.add(option);
                }
            }
        </script>
    </head>
    <body>
        <select id="show-list">
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
        </select>
        <br/>
        <input type="button" value="remove volvo" onclick="removeItemFromList('show-list', 'volvo');"  />
        <input type="button" value="remove saab" onclick="removeItemFromList('show-list', 'saab');"  />
        <input type="button" value="add delorean" onclick="addItemToList('show-list', 'DeLorean', 'delorean');"  />
    </body>
</html>