1

This is part 2 of this question (ok maybe part 3)

Here is a working example: http://jsfiddle.net/UcrD8/63/ Here is a earlier attempt and as you can see this works when selecting the first option: http://jsfiddle.net/UcrD8/4/ But using JQM it uses this as a label for the options and it is not selectable

The functionality to add a new select option is working but if I wanted to remove a selected option, this is not working.

UPDATE:

I did notice that the select element is being removed but jQM's added syntax is still displaying:

<div class="ui-select">
    <div data-theme="c" class="ui-btn ui-btn-icon-right ui-btn-corner-all ui-shadow ui-btn-down-c ui-btn-up-c">
        <span class="ui-btn-inner ui-btn-corner-all">
            <span class="ui-btn-text">Remove Selected Option</span>
            <span class="ui-icon ui-icon-arrow-d ui-icon-shadow">
            </span>
        </span>
    </div>
</div>

Need to remove this as well

Community
  • 1
  • 1
Phill Pafford
  • 83,471
  • 91
  • 263
  • 383

4 Answers4

1

Well since jQM has been updated several time, I was able to get this working

Phill Pafford
  • 83,471
  • 91
  • 263
  • 383
  • In this answer, you are not removing option of select. I am in search of exact functionality, but no success yet on jQM. – Anand Mar 17 '12 at 13:45
0
<!DOCTYPE html> 
<html> 
<head> 
  <meta name=viewport content="user-scalable=no,width=device-width" />
  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />
  <script src=jquery.js></script>
  <script src=jquery.mobile/jquery.mobile.js></script>
</head> 

<body> 

<div data-role=page id=home>
  <div data-role=header>
    <h1>Home</h1>
  </div>

  <div data-role=content>
    <p> Window content </p>  
    <ul data-role=listview data-inset=true>
      <li data-icon=delete> <a href=#>Element 1 </a></li>
      <li data-icon=delete> <a href=#>Element 2 </a></li>
      <li data-icon=delete> <a href=#>Element 3 </a></li>
      <li data-icon=delete> <a href=#>Element 4 </a></li>
      <li data-icon=delete> <a href=#>Element 5 </a></li>
    </ul>
  </div>
</div>

</body>
</html>

<script>

$("li .ui-icon").bind ("click", function (event)
{
  $(this).closest ("li").remove ();
});

</script>
user3751157
  • 1
0

I've seen a lot of issues with dynamic pieces.

For example, if I create page elements after a page load via $.mobile.changePage() that are supposed to be jquery-mobilied-ified (data-role and all that), they don't become jquery-mobile-ified AND there's no "parse my page again, jquery" method to be found anywhere. I've logged a bug as such with the jquery mobile team, but we'll see when they get around to it. Might just do it myself.

Jess Jacobs
  • 1,137
  • 1
  • 8
  • 19
  • 1
    there is a function for that and it's called `.page` - http://jquerymobiledictionary.dyndns.org/faq.html – naugtur Apr 23 '11 at 15:39
  • perhaps it was added recently? it wasn't there when i was using it a month ago, and a new version has been released since then. i dont believe i saw it mentioned in the change log. the bug i logged was accepted as a critical bug, so i can't imagine i was just missing something. – Jess Jacobs Apr 26 '11 at 23:23
  • I have not gotten .page() to work. I've seen various claims that .page() refreshes styles, but even in very simple test cases, I cannot get it to refresh jqm styles. – Will Curran Jun 03 '11 at 16:21
0

When I have to remove/hide an item I typically wrap the item in a div and then hide the div. I don't know how much that will help in this situation though.

Twomz
  • 702
  • 10
  • 27
  • I don't think this is related to my question as I was trying to remove list item elements and refresh jQM. I have not tested this issue in a while but your suggestion of placing the elements in a div would not work. I would usually down vote this as I see it more as a comment then a solution, but since you're new to SO please consider editing your response with a solution and not a suggestion – Phill Pafford Nov 09 '11 at 15:28