title: remove parent node from javascript
body: <p>I have a div like the following</p>
  <pre><code> &lt;div id=&quot;basedata-legend-land&quot; class=&quot;legends&quot;&gt;
     &lt;p class=&quot;update_villages_2013&quot;&gt;Villages&lt;/p&gt;
     &lt;p&gt;&lt;img src=&quot;url&quot; alt=&quot;legend&quot; class=&quot;update_villages_2013&quot;&gt;&lt;/p&gt;
     &lt;p class=&quot;district_boundaries&quot;&gt;District Boundaries&lt;/p&gt;
     &lt;p&gt;&lt;img src=&quot;url&quot; alt=&quot;legend&quot; class=&quot;district_boundaries&quot;&gt;&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  <p>As you can see, i have used the same class name for <code>p</code> element and the <code>img</code> inside the other <code>p</code> element. I want to remove these elements when clicking on a button based on the class name. For that i did something like this</p>
  <pre><code>$(`.legends .update_villages_2013`).remove();
  </code></pre>
  <p>This works but when the <code>img</code> is removed, it leaves a empty <code>p</code> element. I want to remove that as well. So basically if i run this code</p>
  <pre><code>$(`.legends .update_villages_2013`).remove();
  </code></pre>
  <p>this is how the div should appear</p>
  <pre><code>&lt;div id=&quot;basedata-legend-land&quot; class=&quot;legends&quot;&gt;
         &lt;p class=&quot;district_boundaries&quot;&gt;District Boundaries&lt;/p&gt;
         &lt;p&gt;&lt;img src=&quot;url&quot; alt=&quot;legend&quot; class=&quot;district_boundaries&quot;&gt;&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  <p>I couldn't just use the <code>parentNode</code> property because if i do, it will remove the main div as well.</p>