如何刪除包含搜索文本的父 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 應該是唯一的

 $('#click').on('click', function() { var elem = $('.header').filter(function() { return ($.text([this]) === 'Tha Royal Natural Spa') }).parent().parent(); if(elem.next().hasClass('divider')) elem.next().remove(); elem.remove(); });

 .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>

Answer 2

請試試這個。

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