Question

我需要在第一次单击时将元素添加到容器中，然后在第二次单击时将其删除。我想在有一个更优雅，更清晰的解决方案的同时，我试图使它变得更加困难。 Fiddle Link

我正在考虑使用数组来为单击的元素创建第一个数组，并为容器中已经存在的元素创建第二个数组。然后从第一个数组过滤掉第二个数组，然后从我的容器中删除那些（不匹配的）元素。

var click = +$(this).data('clicks') || 0; // Check if contacts cliked first time
if (click % 2 == 1) { // 2nd click
  fruits.splice($.inArray(name, fruits), 1); // Remove Name from an array
  $(".test .single").each(function (index, elem) {
    compArr.push($(this).text());
  });
  keyArr = fruits.filter(i => compArr.indexOf(i) !== -1);
  var i = 0;
  for (; i < keyArr.length; i++) {
    $(".name").each(function () {
      $(".single:not(:contains('" + keyArr + "'))").remove();
    });
  } // I guess problem is here
} else { // 1st click
  fruits.push(name);
  $('.test textarea').css({
    'font-size': '12px',
    'border': '0'
  }).prop('placeholder', '').before('<span class="single">' + name + '></span>');
  $('textarea').val('');
}

$(this).data('clicks', click + 1);

对我来说，这部分无法正常工作。但是，即使整个逻辑是错误的，我也希望听到您的任何建议。谢谢！

var i = 0;
for (; i < keyArr.length; i++) {
  $(".name").each(function () {
    $(".single:not(:contains('" + keyArr + "'))").remove();
  });
}

Answer 1

我已经设法解决了。添加了以下代码：

let deleteSingle = $('.single');
for (let i = 0; i < deleteSingle.length; i++) {
  for (let j = 0; j < arrayNewKeys.length; j++) {
    if (deleteSingle[i].innerHTML.includes(arrayNewKeys[j])) {
      deleteSingle.eq(i).addClass('a');
      break;
    } else {
      deleteSingle.eq(i).removeClass('a');
    }
  }
}
$('.styleContacts:not(.a)').remove();
if ($('.test > .single.a:only-child')) {
  $('.single.a').removeClass('a');
}

代替此：

var i = 0;
for (; i < keyArr.length; i++) {
  $(".name").each(function () {
    $(".single:not(:contains('" + keyArr + "'))").remove();
  });
} // I guess problem is here

如何在第二次点击时删除元素

1 个答案: