added uuid generation so that tags can be truly unique. Application now supports deleting tags from page.

Gulpfile.js

@@ -70,6 +70,7 @@ gulp.task('dist-node-modules', function () {
     'node_modules/jquery/dist/jquery.js',
     'node_modules/lodash/index.js',
     'node_modules/ngstorage/ngStorage.js',
+    'node_modules/node-uuid/uuid.js',
     'node_modules/rangy/lib/rangy-core.js',
     'node_modules/rangy/lib/rangy-serializer.js'
     ], {base: 'node_modules'})

package.json

@@ -39,6 +39,8 @@
     "lodash": "^3.10.1",
     "merge2": "^0.3.6",
     "ngstorage": "^0.3.10",
-    "rangy": "^1.3.0"
+    "node-uuid": "^1.4.7",
+    "rangy": "^1.3.0",
+    "uuid": "^2.0.1"
   }
 }

src/index.interfaces.ts

@@ -27,6 +27,7 @@ module tagIt {
   selectionRange: selectionRangeObject
    */
   export interface ISenseTag {
+    id: string,
     userEmail: string;
     sense: ISense;
     context: string;

src/services/tagStorage.service.ts

@@ -21,6 +21,17 @@ module tagIt {
       // this.deleteTags(); // reset tag storage
     }
 
+    deleteTagById (uuid: string) {
+      this.$log.debug('deleting tag from localstorage with uuid: ' + uuid);
+      var newList : ISenseTag[] = [];
+      angular.forEach(this.$localStorage.tagStorage, function(element) {
+        if(element.id !== uuid) {
+          this.push(element);
+        }
+      }, newList);
+      this.$localStorage.tagStorage = newList;
+    }
+
     deleteTags () {
       this.$log.debug('deleting all tags from localstorage');
       delete this.$localStorage.tagStorage;

src/services/webpage.service.ts

@@ -7,6 +7,7 @@ module tagIt {
    */
 
   declare var rangy: any;
+  declare var uuid: any;
 
   export class WebPageService {
 
@@ -32,7 +33,8 @@ module tagIt {
         }
         else if (wasRemoveTagButtonClicked(evt)) {
           this.$log.debug('remove tag button was clicked');
-          removeTagFromText(evt);
+          removeTagFromWebpage(evt);
+          this.tagStorageService.deleteTagById(evt.target.parentElement.id);
         }
         else if(this.findSelectedText()) {
           this.currentSelectionRange = this.getClonedSelectionRange();
@@ -47,16 +49,11 @@ module tagIt {
       function wasRemoveTagButtonClicked (evt : any) {
         return evt.target.className === 'js-tagit-remove-tag';
       }
-      function removeTagFromText (evt) {
-        debugger;
-
-        //get text
-
-        //replace span with text
-
-        //notify tag storage of removal
-
-
+      function removeTagFromWebpage (evt: any) {
+        var theOriginalTextNode = evt.target.previousSibling;
+        var theSurroundingSpanElement = evt.target.parentElement;
+        theSurroundingSpanElement.parentNode
+          .replaceChild(theOriginalTextNode, theSurroundingSpanElement);
       }
     }
 
@@ -84,9 +81,11 @@ module tagIt {
       var range = this.currentSelectionRange;
       var serializedRange = rangy.serializeRange(
         range, false, document.getElementById('tagit-body'));
-      this.surroundRangeWithSpan(sense, range);
+      var generatedUuid : string = uuid.v4();
+      this.surroundRangeWithSpan(sense, range, generatedUuid);
 
       return {
+        id: generatedUuid,
         userEmail: 'testEmail',
         sense: sense,
         context: range.commonAncestorContainer.innerText,
@@ -119,13 +118,13 @@ module tagIt {
 
       //tag that text with a span and a remove button.
       this.surroundRangeWithSpan(tagToLoad.sense,
-        selection.getRangeAt(0).cloneRange());
+        selection.getRangeAt(0).cloneRange(), tagToLoad.id);
     }
 
-    private surroundRangeWithSpan (sense: ISense, range: Range) {
+    private surroundRangeWithSpan (sense: ISense, range: Range, uuid: string) {
       // add span around content
       var span : HTMLSpanElement = document.createElement('span');
-      span.id = sense.senseid;
+      span.id = uuid;
       span.title = sense.explanation;
       span.className = 'tagit-tag';
       range.surroundContents(span);