如何删除包含搜索文本的父div

Question

我正在尝试删除包含搜索文本的div。在只有ul和li之前，我使用下面的代码行删除了该列表。

HTML

<div id="found-results">
    <div class="ui list found-result"></div>
</div>

我使用append将列表添加到以上html

$('.ui.list.found-result').filter(function() {
    return $.text([this]) === 'Tha Royal Natural Spa'; }).remove();
}

现在我必须使用div来代替li。我的innerHTML看起来像这样：

<div class="item" id="id_">
    <div class="content">
        <a class="header">Lawson 108 Mercury Tower</a>
        <div class="description">Pathum Wan Bangkok, 10330<i class="map marker icon"></i></div>
    </div>
</div>
<div class="ui divider"></div>
<div class="item" id="id_">
    <div class="content">
        <a class="header">Tha Royal Natural Spa</a>
        <div class="description">Bang Rak Bangkok, 10500<i class="map marker icon"></i></div>
    </div>
</div>
<div class="ui divider"></div>

如何删除包含该搜索文本的父div？

Answer 1

在您的代码中，您有2个具有相同ID的项目。永远不要那样做。 ID应该是唯一的

.divider {
  background: red;
  height: 2px;
  width: 100px'
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item" id="id_1">
  <div class="content">
    <a class="header">Lawson 108 Mercury Tower</a>
    <div class="description">
      Pathum Wan Bangkok, 10330 <i class="map marker icon"></i>
    </div>
  </div>
</div>

<div class="ui divider"></div>

<div class="item" id="id_2">
  <div class="content">
    <a class="header">Tha Royal Natural Spa</a>
     <div class="description">
         Bang Rak Bangkok, 10500<i class="map marker icon"></i>
     </div>
  </div>
</div>

<div class="ui divider"></div>


<br><br>

<button id="click">Remove</button>

let someArray = {
  Person: {
    age: 27,
    online: true
  }
};


function works(obj) {
  return ('Person' in obj); 
}

console.log("works returns:" + works(someArray));

function doesNotWork(obj) {
  return  
    ('Person' in obj); 
}

console.log("doesNotWork returns:" + doesNotWork(someArray));

Answer 2

请尝试这个。

$( "div:contains('Tha Royal Natural Spa')" ).remove()