Add Item Config

Should allow you to add and remove various config items based on user input.

by Sam Fereday

HTML

<ul id="container"></ul>

CSS

body{
  padding: 1em;
  margin: 0;
  font: 85%/1.4em arial;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  padding: 0;
  margin: 0;
}

JavaScript

// I do wonder if we should be using knockout for this web site...
var Item = function(){
	this.id = Math.random();
	return this;
};

// Beware your prototype and inheritance of properties. Some are duplicating, keep them private.
// Item isn't being removed from cache or memory, be careful.
Item.prototype = {
	 name: "",
   description: "",
   el: "",
   make: function(str)
   {
   		this.el = document.createElement("li");
      this.$el = $(this.el);
      this.el.className += str || "el-noclass";
			this.$el.append("<p><strong>Title</strong><br />This is the item description.</p><button class='edit'>Edit</button> <button class='remove'>Remove</button>");
      this.bindClicks();
			return this.el;
   },
   bindClicks: function()
   {
   		this.$el.find(".edit").click(e => {
      		console.log("I'd like to edit:", this.id);
      })
      this.$el.find(".remove").click(e => {
      		console.log("I'd like to remove:", this.id);
          this.$el.remove();
      })
   }
}

// Make some items
$("#container").append(new Item().make("item"));
$("#container").append(new Item().make("item"));
$("#container").append(new Item().make("item"));

// Custom event listener when item fires remove event