// DOM ready $(function() { var $garage = $('#garage'), $vehicleType = $('#vehicleType'), $vehicleName = $('#vehicleName'), $addVehicleForm = $('#addVehicleForm'), $vehicleTemplate = $('#vehicleTemplate'); // Add vehicle form submit $addVehicleForm.submit(function(e) { e.preventDefault(); var vehicleName = $.trim($vehicleName.val()); if(vehicleName === '') { alert('Vehicle name required.'); $vehicleName.focus(); } // Input OK else { // Add vehicle to garage var $vehicle = $($.trim($vehicleTemplate.html())); $vehicle.addClass($vehicleType.val()); $vehicle.find('.vehicleType').text($vehicleType.find(':selected').text()); $vehicle.find('.vehicleName').text(vehicleName); $vehicle.appendTo($garage); // Clear and focus vehicle name input $vehicleName.val('').focus(); } }); // Delete vehicle button $(document).on('click', '#garage .vehicle .deleteBtn', function(e) { e.preventDefault(); $(this).closest('.vehicle').remove(); }); // Select vehicle name after vehicle type change $vehicleType.change(function() { $vehicleName.focus(); }); });
<h1>My Garage</h1> <ul id="garage"> <li class="vehicle car"> <strong class="vehicleType">Car</strong> - <span class="vehicleName">2011 Nissan Frontier</span> - <a class="deleteBtn" href="#">delete</a> </li> <li class="vehicle motorcycle"> <strong class="vehicleType">Motorcycle</strong> - <span class="vehicleName">2007 Honda CRF450R</span> - <a class="deleteBtn" href="#">delete</a> </li> </ul> <script type="template" id="vehicleTemplate"> <li class="vehicle"> <strong class="vehicleType"></strong> - <span class="vehicleName"></span> - <a class="deleteBtn" href="#">delete</a> </li> </script> <form id="addVehicleForm"> <select id="vehicleType"> <option value="car">Car</option> <option value="motorcycle">Motorcycle</option> </select> <input type="text" id="vehicleName" placeholder="Vehicle name" /> <button type="submit" id="addVehicleBtn">Add Vehicle</button> </form>