[Solved] Allowing user to customize the items on the list menubar

by


What you’re looking for is possible with vanilla Javascript, jQuery, or a host of other libraries. jQuery is where I’d recommend you start.

You can create new elements by passing html elements as strings to the jQuery function. See the “Creating New Elements” section of this page. Using append and remove as Muzammil mentioned, you can add and remove elements from the DOM.

I’ve created a small jsFiddle demonstrating some of the functions I’m talking about and how you might use them. This is a limited demo that doesn’t include every feature you’d want for a full implementation, but uses some of the pertinent jQuery functions.

HTML

<div id="sidebar">
   <ul class="sidebar-nav">
    <li class="sidebar-menu">
     <a>MENU</a>
    </li> 

    <li>
     <a href="#" target="myframe">Link #1</a>
     <button class="delete-link">Delete</button>
    </li> 

    <li>
     <a href="#">Link #2</a>
     <button class="delete-link">Delete</button>
    </li>

    <li>
     <a href="#">Link #3</a>
     <button class="delete-link">Delete</button>
    </li> 

    <li>
     <a href="#">Link #4</a>
     <button class="delete-link">Delete</button>
    </li>
   </ul>

   <div class="input-field">
     <label for="link-title">Enter link title</label>
     <input type="text" class="link-title" name="link-title" placeholder="link Title" />
   </div>

   <div class="input-field">
     <label for="link-title">Enter link URL</label>
     <input type="url" class="link-url" name="link-url" />
   </div>

   <input type="submit" class="add-button" value="Add" />
 </div>

Javascript w/ jQuery

var $addButton = $('.add-button');
var $sidebarMenu = $('.sidebar-nav');

// Add the event handlers
$(document).on('click', '.delete-link', removeLink);
$addButton.on('click', addLink);

function removeLink(e) {
    // Remove the parent <li> element of the clicked link
    var $link = $(e.currentTarget).closest('li');
  $link.remove();
}

function addLink(e) {
  e.preventDefault();

  var $linkTitle = $('.link-title');
  var $linkUrl = $('.link-url');
  // Create the new link element using values from text inputs
  var $link = $('<li>').append(
    $('<a>').attr('href', $linkUrl.val()).text($linkTitle.val()));

  // Add a delete button for the link
  $link.append($('<button>').addClass('delete-link').text('Delete'));
  $sidebarMenu.append($link);
  // Reset the text inputs
  $linkTitle.val('');
  $linkUrl.val('');
}

1

solved Allowing user to customize the items on the list menubar