How do you remove the 4th div tag and replace it with your own content using JQuery?

Question

So I am using an ad blocker which detects if a user has AdBlocker turned on on there web browser. If an Ad Blocker is detected then I would like to remove the 4th .owl-item class and replace it with my own code. So currently I am using:

$(".single-gallery div.owl-wrapper div.owl-item:eq(3)").remove();

and replacing it with

$(".single-gallery div.owl-wrapper div.owl-item:eq(3)").append("<div class='panel-display'><div class='panel_content'>We noticed that you are using an ad blocker.</div></div>");

The Html code is:

    <div class="owl-wrapper">
      <div class="owl-item">Item 1</div>
      <div class="owl-item">Item 2</div>
      <div class="owl-item">Item 3</div>
      <div class="owl-item">Item 4</div> //Remove this item
      <div class="owl-item">Item 5</div>
    </div>

I would like the final outcome to look like this:

    <div class="owl-wrapper">
      <div class="owl-item">Item 1</div>
      <div class="owl-item">Item 2</div>
      <div class="owl-item">Item 3</div>
      <div class="panel-display">
       <div class="panel_content">
         We noticed that you are using an ad blocker.
       </div>
      </div>
      <div class="owl-item">Item 5</div>
    </div>

The current code that I am using is giving me unexpected results. For some reason I have to refresh my browser for code changes to take place. I'm not sure if I am going about this correctly. I've been banging my head against the wall on this issue for a while. I am sure there is a better way to handle this.

My full code is below for reference.

jQuery(document).ready( function($) {
    $('.icon.icon-arrow-right').one("click", function(){
        function adBlockDetected() {
          $(".single-gallery div.owl-wrapper div.owl-item:eq(3)").remove();           
           $(".single-gallery div.owl-wrapper div.owl-item:eq(3)").append("<div class='panel-display'><div class='panel_content'>We noticed that you are using an ad blocker</div></div>");
        }
        function adBlockNotDetected() {


        }

        if(typeof blockAdBlock === 'undefined') {
          adBlockDetected();
        } else {
          blockAdBlock.setOption({ debug: true });
          blockAdBlock.onDetected(adBlockDetected).onNotDetected(adBlockNotDetected);
        }

        function checkAgain() {
          $('#block-adb-enabled').hide();
          $('#block-adb-not-enabled').hide();
          // setTimeout 300ms for the recheck is visible when you click on the button
          setTimeout(function() {
            if(typeof blockAdBlock === 'undefined') {
              adBlockDetected();
            } else {
              blockAdBlock.onDetected(adBlockDetected).onNotDetected(adBlockNotDetected);
              blockAdBlock.check();
            }
          }, 300);
        }
    });
  });    

Answer 1

How do you remove the 4th div tag and replace it with your own content using JQuery?

Amusingly, you use replaceWith (not remove then append ):

$(".single-gallery div.owl-wrapper div.owl-item:eq(3)").replaceWith("<div class='panel-display'><div class='panel_content'>We noticed that you are using an ad blocker.</div></div>");
// -----------------------------------------------------^

Example:

 $("#btn").click(function() { $(".single-gallery div.owl-wrapper div.owl-item:eq(3)").replaceWith("<div class='panel-display'><div class='panel_content'>We noticed that you are using an ad blocker.</div></div>"); }); 

 <input type="button" id="btn" value="Do Replace"> <div class="single-gallery"> <div class="owl-wrapper"> <div class="owl-item">Item 1</div> <div class="owl-item">Item 2</div> <div class="owl-item">Item 3</div> <div class="owl-item">Item 4 (to be replaced)</div> <div class="owl-item">Item 5</div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 2

Use replaceWith() in the $(document).ready function

http://jsfiddle.net/rf3esr4o/