title: How to destroy a dynamically created DOM element using jquery?
body: <p>I am creating a dynamic span inside a span with some form elements and creating button with data-id inside the same dynamically  by jquery append in span #add_more. I want to remove that particular span when button of that span is clicked.</p>
  
  <p>Step1. </p>
  
  <pre><code>&lt;input type="button" value="Add More" id="more_size"&gt;
  &lt;span id="add_more"&gt;&lt;/span&gt;
  </code></pre>
  
  <p>2.Clicked on Add More button :-</p>
  
  <pre><code>&lt;input type="button" value="Add More" id="more_size"&gt;
  &lt;span id="add_more"&gt;
      &lt;span id="1001"&gt;&lt;input type="text" name="price[]"&gt;
      &lt;button data-id="1001" type="button"&gt;X&lt;/button&gt;&lt;/span&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>3.When clicked on button with id 1001 span with id 1001 should removed using jquery remove().</p>
  
  <pre><code>&lt;input type="button" value="Add More" id="more_size"&gt;
  &lt;span id="add_more"&gt;&lt;/span&gt;
  </code></pre>
  
  <p>I am new to stack overflow. This is the best way I can explain my problem.  </p>