Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
 
<button>select children</button>
  
<h2>Selected Shakephere plays</h2>
<ul id="selected-plays">
    <li>Comedies
        <ul>
            <li><a href="/asyoulikeit/">As You Like It</a></li>
            <li>All's Well That Ends Well</li>
            <li>A Midsummer Night's Dream</li>
            <li>Twelfth Night</li>
        </ul>
    </li>
    <li>Tragedies
        <ul>
            <li><a href="hamlet.pdf">Hamlet</a></li>
            <li>Macbeth</li>
            <li>Romeo and Juliet</li>
        </ul>
    </li>
    <li>Histories
        <ul>
            <li>Henry IV (<a href="mailto:henryiv@king.co.uk">email</a>)
                <ul>
                    <li>Part I</li>
                    <li>Part II</li>
                </ul>
            </li>
            <li><a href="http://www.shakespeare.co.uk/henryv.htm">Henry V</a></li>
            <li>Richard II</li>
        </ul>
    </li>
</ul>
</body>
</html>
 
$('button').on('click', function() {
  var $categoryLIs = $("#selected-plays").children("li");
  var categories = getCategories($categoryLIs);
  debugger;
})
var getCategories = function($elements) {
  var categories = new Array();
  
  $elements.each(function(index) {
    var element = $elements[index];
    var newElement = $.clone(element);
    $(newElement).find('ul').remove();
    categories.push(newElement);
  });
  
  return categories;
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers