javascript - 我想如果有 2 个元素具有相同的文本，一个在 jquery 中被删除

Question

当用户选择一个选项时，我试图让它的文本在另一个段落中

我想如果用户两次选择相同的选项它的文本不会再次复制到段落中

$('.cho-skills').on('change', function() {

  $('.al-skils').append($('.formss .bio .append-p .eac-p').clone(true).removeClass('disp-no'));

  $('.formss .bio .each-sk').last().text($('.cho-skills').val());

});

$('.formss .bio .eac-p i').on('click', function() {

  $(this).parents('.eac-p').remove();

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="select-inp cho-skills">
  <option value="1">Choose your skills *</option>
  <option>skill 1</option>
  <option>skill 2</option>
  <option>skill 3</option>
</select>

<div class="skil-inbio">
  <div class="al-skils">
    <div class="append-p disp-no">

      <div class="eac-p">
        <p class="each-sk"></p>
        <i class="fas fa-times"></i>
      </div>

    </div>
  </div>
  <hr>
</div>

Answer 1

您没有提供将 p 元素附加到何处的信息，因此在我的示例中，我将它们附加到 .eac-p 中。您应该能够根据需要配置它。

$('.cho-skills').on('change', function() {
  var val = $(this).val();
  if(!$('.eac-p > p:contains("'+val+'")').length) {
  	$(".eac-p").append("<p>" + val + "</p>");
  }
})

$(document).on("click", ".eac-p > p", function() {
  $(this).remove();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="select-inp cho-skills">
  <option value="1">Choose your skills *</option>
  <option>skill 1</option>
  <option>skill 2</option>
  <option>skill 3</option>
</select>

<div class="skil-inbio">
  <div class="al-skils">
    <div class="append-p disp-no">

      <div class="eac-p">

      </div>

    </div>
  </div>
  <hr>
</div>

让我们来看看这个:

1. 您设置了一个onchange 事件监听器。
2. var val 是您的option 的值。
3. 接下来我们检查一个元素是否已经存在。为此，我们使用 CSS 伪类 :contains。 JQuery 将返回包含值 ($('.eac-p > p:contains("'+val+'")')) 的所有元素的数组。如果数组为空，则没有找到任何元素，但如果有一个元素，它将返回元素。因此，让我们检查 length 以查看是否找到元素 ($('.eac-p > p:contains("'+val+'")').length )
4. 记住:0 等于 false!你看到 ! 了吗？这类似于使用 == false。因此，您也可以编写 $('.eac-p > p:contains("'+val+'")').length == false。但这并不重要。
5. 因此，如果数组为空且未找到任何元素，该函数将附加您的 p。
6. 其余代码用于在单击后删除 p。

编辑

$('.cho-skills').on('change', function() {
  var val = $(this).val();
  if (!$('.eac-p > p:contains("' + val + '")').length) {
    var temp = $(".append-p.disp-no").clone();
    temp.removeClass("disp-no").find("p").text(val);

    $(".al-skils").append(temp);
  }
})

$(document).on("click", ".append-p .eac-p > p", function() {
  $(this).closest(".append-p").remove();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="select-inp cho-skills">
  <option value="1">Choose your skills *</option>
  <option>skill 1</option>
  <option>skill 2</option>
  <option>skill 3</option>
</select>

<div class="skil-inbio">
  <div class="al-skils">
    <div class="append-p disp-no">

      <div class="eac-p">
        <p class="each-sk"></p>
        <i class="fas fa-times"></i>
      </div>

    </div>
  </div>
  <hr>
</div>

在这次编辑中，我们使用了不同的方法。我们克隆元素并将其设置为变量。重要提示:变量实际上不是这个元素:

<div class="append-p disp-no">
  <div class="eac-p">
     <p class="each-sk"></p>
     <i class="fas fa-times"></i>
   </div>
</div>

该变量是一个尚未附加的完整新元素。 然后我们更改我们的需求并附加它。