How to ignore a particular `<div>` while using Responsive Speech API for Text-To-Speech

I am using the ResponsiveSpeech API and I have incorporated this plugin in my sample working application.

Now if you will observe here that the plugin is correctly speaking the given article under the <div id="row_view"> container. The problem that I am encountering is that I wanted to ignore the div id="googleadframe" style="border: 0pt none;">container. The plugin will speak the text inside the frame and I want to ignore that text. Has anyone who has used this API been able to do this successfully?

I have done research on their API and tried to find examples but I was not able to do so. Any help would be appreciated. Here is my code for sample reference:

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>TestingOnlyDemo</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://code.responsivevoice.org/responsivevoice.js"></script>
    <script type="text/javascript">

        $(document).ready(function () {
            disableSourceEdit();
        });

        function speak(obj) {

                $("#listenBtn").hide();
                $("#speechoperation").show();
                responsiveVoice.speak($('#row_view').text(), "UK English Female");
        };

        function pause() {
            responsiveVoice.pause();
        };

        function resume() {
            responsiveVoice.resume();
        };

        function stop() {
            $("#listenBtn").show();
            $("#speechoperation").hide();
            responsiveVoice.cancel();
        };
    </script>
</head>
<body>
    <center>
        <div>
            <hgroup>
                <h2>Text To Speech Application Demo</h2>
            </hgroup>

            <div class="article_body" id="row_view">
                <div id="body"><p>This article includes definition, types of articles – a, an, the.There are example sentences.</p></div>
                <div id="googleadframe" style="border: 0pt none;"><iframe id="google_ads_iframe_/1055314/LM_MF_WAP_ePaper_Interstitial_0" title="3rd party ad content" name="google_ads_iframe_/1055314/LM_MF_WAP_ePaper_Interstitial_0" width="30" height="25" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" srcdoc="" data-google-container-id="3" style="border: 0px; vertical-align: bottom;" data-load-complete="true">HERE IS THE IFRAME THAT WE NEED TO HIDE</iframe></div>
                <div>The definite article is the word the. It limits the meaning of a noun to one particular thing.</div>
            </div>
            <div class="articulate-area">
                <button class="btn btn-primary" id="listenBtn" onclick="speak('article')">Listen</button>
                <span id="speechoperation" style="display:none">
                    <button class="btn btn-primary" onclick="pause()">Pause</button>
                    <button class="btn btn-primary" onclick="resume()">Resume</button>
                    <button class="btn btn-primary" onclick="stop()">Stop</button>
                </span>
            </div>
        </div>
    </center>
</body>
</html>

NOTE: I cannot change the HTML structure of the View. I need a way to ignore the iframe div tag when the speak operation is underway. Adding any div element wont help me to solve this problem

Thanks in advance!

Solution

Instead of speaking the entire contents of #row_view, speak the contents of every child of #row_view that isn't the ad frame:

responsiveVoice.speak($('#row_view > :not(#googleadframe)').text(), "UK English Female");

Note that this will only grab text from child elements of #row_view, not text directly inside it.

<div class="article_body" id="row_view">
  ********THIS TEXT WILL NOT BE SPOKEN********
  <div id="body">
    <p>But this will.</p>
  </div>
  <div id="googleadframe" style="border: 0pt none;">Nothing in here</div>
  <div>Back to speaking</div>
</div>