Question

This is in the context of a Dojo editor, but it should apply more generally.

I have an <img> tagged that is wrapped in a <a> tag:

<a><img width="146" height="109" src="/gaggleVideoProxy.do?op=thumb&amp;thumbUrl=http://i.ytimg.com/vi/xoZXdWl7BZs/default.jpg" _djrealurl="/gaggleVideoProxy.do?op=thumb&amp;thumbUrl=http://i.ytimg.com/vi/xoZXdWl7BZs/default.jpg" &ytvideoid="xoZXdWl7BZs&amp;userVideoId=1073344&quot;"></a>

If you click on this, the image is selected. Clicking the delete key will cause the image to be deleted, but leaves the link tag.

I’m looking for a way to ensure that the <a> tag is deleted whenever the <img> tag is deleted.

---

Update

This turns out to be more of a dojo api question. Looking at this SO question/answer has given me the basic tools to do what I need:

How can i add event listener to the content of dojo editor?

Answer 1

This works:

_connectTagEvents: function(){
    this.editor.onLoadDeferred.addCallback(dojo.hitch(this, function(){
  this.connect(this.editor.editNode, "onclick", this._onClick);
    }));
},
_onClick: function(e){
  var target = e.target;
  var tag = target.tagName ? target.tagName.toLowerCase() : "";
  var wrapper = target.parentNode;

  if(/* TAG and/or WRAPPER are what you want*/) {        
    dojo.withGlobal(this.editor.window, "selectElement", dijit._editor.selection, [wrapper]);
  }
}

And this will force the wrapping element to be selected. (Don’t forget to call _connectTagEvents from the initButton() method.