如果有两个具有相同文本的元素，那么在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>

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