jQuery 搜索匹配字符串并删除父 div

Question

I've an HTML below:

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

and I would like to remove the parent DIV (container) and it's content if a child span contains a word, "this" for example.
The code should search for the word "this" on all spans and delete the divs with the Id "container0" and "container2". I already have the Regex but I'm totally lost after that. I know that I should use querySelector but I never used it before and tried to make it work, but I failed.

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

Thank you,

Answer 1

You can use the :contain() selector.

 $(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

You can accomplish what you are looking for with jquery by doing something like the following (since you mentioned querySelector , you should know that it can be done with plain javascript as well - see the second code example below).

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 only:

 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>