title: Deleting from a Content Editable div?
body: <p><a href="https://jsfiddle.net/57vsyrsu/" rel="nofollow">JSFiddle</a></p>
  
  <pre><code>&lt;div contenteditable="true"&gt;
      &lt;p&gt;This is an editable paragraph.&lt;/p&gt;
      &lt;figure&gt;
          &lt;img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg"&gt;
      &lt;/figure&gt;
   &lt;p&gt;This is an editable paragraph.&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Im messing around with a content editable div.</p>
  
  <p>Inside i have an image, which sits inside a figure tag.</p>
  
  <p>Upon highlighting the image and pressing delete on my keyboard, the image gets deleted, but the figure tag stays behind.</p>
  
  <p>How would I also delete the figure tag alongside the image when I highlight the image?</p>
  
  <p>Would I need tome sort of JS trickery or am I missing something obvious?</p>