Tango Card Interview Question: Nav Menu

by Leespiker

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<!--
  Instructions: The click handler for these table buttons is not functioning. Modify this application so that removing rows is functional.
-->

<h3>Fancy Table!</h3>
<table></table>

SCSS

table, td {
  border: 1px solid black;
}

table {
  width: 100%;
  table-layout: fixed;
  
  td:nth-child(even) {
    width: 80%;
  }
  
  td:nth-child(even) {
    text-align: center;
    width: 20%;
  }
}

JavaScript

$("table").on('click', 'button', function(){
	console.log(111);
	$(this).closest("tr").remove();
});

/* Do not modify below this point */

$.ajax({
  url: '/echo/json/',
  dataType: "json",
  type:"POST",
  data: {
    json: JSON.stringify(_.map(_.range(8), function(i){
    	return "Row " + i;
    })),
    delay: 1
	}
}).done(function(data){
	var template = _.template(
  	"<% _.each(rows, function(r){ %> " +
      "<tr><td><%- r %></td>" +
      "<td><button>remove row</button></td></tr> " +
    "<% }) %>");
    
	$("table").html(template({rows: data}));
});