jQuery 搜索匹配字符串並刪除父 div

Question

我下面有一個 HTML：

<div id="keywords">
    <div id="container0">
        <span id="term010"> this</span>
        <span id="term111"> is</span>
        <span id="term212"> a</span>
        <span id="term313"> phrase</span>
    </div>

    <div id="container1">
        <span id="term014"> exact</span>
        <span id="term115"> match</span>
        <span id="term216"> type</span>
    </div>

    <div id="container2">
        <span id="term017"> this</span>
        <span id="term118"> is</span>
        <span id="term219"> a</span>
        <span id="term320"> broad</span>
    </div>
</div>

我想刪除父 DIV（容器），如果子跨度包含一個詞，例如“this”，它就是內容。
該代碼應在所有范圍內搜索單詞“this”並刪除 ID 為“container0”和“container2”的 div。 我已經有了正則表達式，但在那之后我完全迷路了。 我知道我應該使用 querySelector 但我以前從未使用過它並試圖讓它工作，但我失敗了。

/\<span id="term[0-9]{3,}"> this<\/span>/gm

謝謝，

Answer 1

您可以使用:contain()選擇器。

 $(document).ready(function(){ $("#keywords").find("span:contains('this')").each(function(){ if($(this).next("span").html()==" is"){ // Watch out for leading space..; $(this);parent("div");remove(); } }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="keywords"> <div id="container0"> <span id="term010"> this</span> <span id="term111"> is</span> <span id="term212"> a</span> <span id="term313"> phrase</span> </div> <div id="container1"> <span id="term014"> this</span> <span id="term014"> deserves</span> <span id="term014"> exact</span> <span id="term115"> match</span> <span id="term216"> type</span> </div> <div id="container2"> <span id="term017"> this</span> <span id="term118"> is</span> <span id="term219"> a</span> <span id="term320"> broad</span> </div> </div>

Answer 2

您可以通過執行以下操作來使用 jquery 完成您正在尋找的內容（因為您提到了querySelector ，您應該知道它也可以使用普通的 javascript 來完成 - 請參閱下面的第二個代碼示例）。

JQuery：

 const spans = $('span'); spans.each(function(index, elem) { if (elem.textContent.toLowerCase().indexOf('this') >= 0) { elem.parentNode.remove(); } });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="keywords"> <div id="container0"> <span id="term010"> this</span> <span id="term111"> is</span> <span id="term212"> a</span> <span id="term313"> phrase</span> </div> <div id="container1"> <span id="term014"> exact</span> <span id="term115"> match</span> <span id="term216"> type</span> </div> <div id="container2"> <span id="term017"> this</span> <span id="term118"> is</span> <span id="term219"> a</span> <span id="term320"> broad</span> </div> </div>

僅限 Javascript：

 const spans = document.querySelectorAll('span'); for (const span of spans) { if (span.textContent.toLowerCase().indexOf('this') >= 0) { span.parentNode.remove(); } }

 <div id="keywords"> <div id="container0"> <span id="term010"> this</span> <span id="term111"> is</span> <span id="term212"> a</span> <span id="term313"> phrase</span> </div> <div id="container1"> <span id="term014"> exact</span> <span id="term115"> match</span> <span id="term216"> type</span> </div> <div id="container2"> <span id="term017"> this</span> <span id="term118"> is</span> <span id="term219"> a</span> <span id="term320"> broad</span> </div> </div>