jQuery Mobile: remove elements from another page

Question

For multiple page single html type application, is it possible to remove an element in previous page from an current active page so that when user clicks on a back button, it will show updated page? I have tried something similar like below but it does not seem to work.

Thanks

ex)

<script>
   function somecallback_in_page1() {
      $("#page2").find("#foo").remove();
   }
</script>
<!-- current page -->
<div data-role="page" id="page1">
</div>
<div data-role="page" id="page2">
   <div id="foo">bar</div>
</div>

score 1 · Accepted Answer · answered Jul 11 '14 at 15:17

As both pages are in the DOM it is no problem:

Here is a DEMO

Given these 2 pages:

<div data-role="page" id="page1">
     <div data-role="header">
        <h1>My page 1</h1> 
    </div>  
    <div role="main" class="ui-content">
        <a href="#page2" class="ui-btn">Go to page 2</a>
        <div id="removeMe">
            this will be removed via a button click while you are on page 2            
        </div>
    </div> 
</div>  

<div data-role="page" id="page2">
     <div data-role="header">
        <h1>My page 2</h1> 
    </div>  
    <div role="main" class="ui-content">
        <button id="btnRemove">Remove Element from Page 1</button>
        <a href="#page1" class="ui-btn">Go back to page 1</a>
    </div> 
</div>

Navigate to page 2, click the remove element button, then navigate back to page 1.

The script is

$(document).on("pagecreate", "#page2", function(){
    $("#btnRemove").on("click", function(){
        $("#removeMe").remove();
    });
});

Btw, it is good practice to make sure your DOM element IDs are unique across all pages; otherwise, you can run into confusing selector issues later.

@ljustin, you are welcome. You also need to wait until the DOM is ready before executing your script... — ezanker, Jul 11 '14 at 15:42

score 0 · Answer 2 · edited May 23 '17 at 12:29

0

I have never used jquery to detect whether the back button is clicked but there are some good links on here. Check this post out:

JavaScript or jQuery browser back button click detector

Once detected you could use jquery to hide the panel like this:

<script>
$(function () {
   $("#foo").hide();
});
</script>

edited May 23 '17 at 12:29

Community

1
1

answered Jul 11 '14 at 15:10

Matt

551
5
4

jQuery Mobile: remove elements from another page

2 Answers2