Найти и удалить элемент с определенным содержанием

Question

У меня много тегов <p> &nbsp </p> в середине содержимого описания.Я хочу найти и удалить теги, содержащие только &nbsp.Контейнер описания имеет имя класса desc_container.

Вот пример контейнера,

<div class="desc_container">
    <p> Some contents! <p>
    <p> &nbsp </p>
    <p> Again some contents! <p>
    <p> &nbsp </p>
</div>

<script>
    jQuery(document).ready(function(){
      // This will give me all the <p> tags
      $('.desc_container').find('p');

      // This is what i want
      $('.desc_container').find('p').containsOnly('&nbsp');
    }
</script>

Оцените помощь.Спасибо!

Answer 1

Вам не нужно использовать find, так как вы можете просто выбрать все теги <p> внутри desc_container.

Просто используйте следующий селектор: $('.desc_container p') или jQuery('.desc_container p'), если выне сопоставил объект jQuery с $.

. Это вернет вам все Nodes, которые можно зациклить с помощью метода jQuery each, а затем удалить с помощью .remove().Кроме того, убедитесь, что trim строка перед сравнением.

$(document).ready(function(){
  $('.desc_container p').each(function() {
    if($(this).html().trim() === ' '){
      $(this).remove();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="desc_container">
 <p>Text</p> <p> &nbsp </p><p>Text</p><p> &nbsp </p>
</div>

Answer 2

$("#deleteEmpty").on('click', function() {
  $(".desc_container p").each(function(index, element) {
    var $element = $(element);
    if ($element.html().trim() === " ") {
      $element.remove();
    }
  });
});

.desc_container p {
  padding: 5px 8px;
  background-color: #EEE;
  margin: 5px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="desc_container">
  <p>&nbsp;</p>
  <p>Sample text here</p>
  <p> &nbsp; </p>
  <p>Sample text here</p>
  <p>&nbsp;</p>
  <p>Sample text here</p>
  <p>Sample text here</p>
  <p>Sample text here</p>
  <p> &nbsp; </p>
  <p></p>
  <p>Sample text here</p>
</div>

<button id="deleteEmpty">Delete empty `p` tags</button>

Answer 3

Вы можете попробовать следующее

$(document).ready(function(){
  $(".desc_container p").each(function(){
      if($(this).text().trim() == "") {
      $(this).remove();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="desc_container">
    <p> Some contents! <p>
    <p> &nbsp </p>
    <p> Again some contents! <p>
    <p> &nbsp </p>
</div>

Answer 4

Селектор :contains() выбирает элементы, содержащие указанную строку.Следующий код удалит тег <p>, который содержит &nbsp и может иметь другое содержимое.

$("p:contains(&nbsp)").remove();

Если вы хотите удалить <p>, который содержит только &nbsp, вы можете выполнить цикл<p> отметьте и удалите, значение которого &nbsp

$('p').each(function(){
   if($(this).text().trim() == "&nbsp"){
       $(this).remove();
   }
});

Answer 5

Необходимо проверить $(this).html().trim() === ' ' внутри цикла для каждого элемента <p> и удалить элемент <p>.Вы можете использовать опцию браузера inspect element в приведенном ниже примере для дальнейшей проверки.

$(document).ready(function(){
  $('.desc_container p').each(function(){
    if($(this).html().trim() === ' '){
      $(this).remove();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="desc_container">
 <p> This is a example </p> <p> &nbsp </p> for some content here <p> test data</p><p> &nbsp </p>
</div>