title: Remove a specific span in an element if have child - jquery
body: <p>I'm using nestedsortable jQuery (<a href="http://mjsarfatti.com/sandbox/nestedSortable/" rel="nofollow noreferrer">http://mjsarfatti.com/sandbox/nestedSortable/</a>). In the list, the user can drag and drop the items until level 3. Basically, the item can have father and grandfather.</p>
  
  <p>If the item don't have child, it's going to append the span element, that include the input file. And if the item is the father or grandfather, cannot show the input file element. So, when I drag and drop an item within another item (father), this is works. But when I drag and drop an item within the item dropped previously, the input file don't desappears.</p>
  
  <p><a href="https://jsfiddle.net/marcelpsaraiva/pfhag08g/" rel="nofollow noreferrer">JSFiddle</a></p>
  
  <p>I've posted 5 images to understand better.</p>
  
  <p>For example:
  <a href="https://i.stack.imgur.com/7oRsf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7oRsf.png" alt="I have this list"></a></p>
  
  <p><a href="https://i.stack.imgur.com/YwWNq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YwWNq.png" alt="I arrast the item 5 and item 7 to item 6. The item 6 is father of items 5 and 7. The file button appears to theses items because they don&#39;t have child."></a></p>
  
  <p><a href="https://i.stack.imgur.com/wOvgz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wOvgz.png" alt="When I drag and drop the item 5 out from item 6, the button file desappears to this item 5."></a></p>
  
  <p><a href="https://i.stack.imgur.com/e5RRB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/e5RRB.png" alt="When I drag and drop the item 5 to item 7, in item 5, the button file appears (that&#39;s correct! But in the item 7, the button file don&#39;t desappears. In fact, this button would be desappears!"></a></p>
  
  <p><a href="https://i.stack.imgur.com/8Fp6P.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8Fp6P.png" alt="And if I drag and drop the item 7 to raiz, the button don&#39;t desappears."></a></p>
  
  <p>The code:</p>
  
  <pre><code>&lt;ol class="sortable"&gt;
          &lt;li id="list_1"&gt;&lt;div&gt;&lt;span class="disclose"&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;Item 1&lt;span title="Click to delete item." data-id="1" class="deleteMenu ui-icon ui-icon-closethick"&gt;X&lt;/span&gt;&lt;/div&gt;
              &lt;ol&gt;
                  &lt;li id="list_2"&gt;&lt;div&gt;&lt;span class="disclose"&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;Sub Item 1.1&lt;span title="Click to delete item." data-id="2" class="deleteMenu ui-icon ui-icon-closethick"&gt;X&lt;/span&gt;&lt;/div&gt;
                      &lt;ol&gt;
                          &lt;li id="list_3"&gt;&lt;div&gt;&lt;span class="disclose"&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;Sub Item 1.2&lt;span title="Click to delete item." data-id="3" class="deleteMenu ui-icon ui-icon-closethick"&gt;X&lt;/span&gt;&lt;/div&gt;
                      &lt;/ol&gt;
              &lt;/ol&gt;
          &lt;li id="list_4"&gt;&lt;div&gt;&lt;span class="disclose"&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;Item 2&lt;span title="Click to delete item." data-id="4" class="deleteMenu ui-icon ui-icon-closethick"&gt;X&lt;/span&gt;&lt;/div&gt;
          &lt;li id="list_5"&gt;&lt;div&gt;&lt;span class="disclose"&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;Item 3&lt;span title="Click to delete item." data-id="5" class="deleteMenu ui-icon ui-icon-closethick"&gt;X&lt;/span&gt;&lt;/div&gt;
              &lt;ol&gt;
                  &lt;li id="list_6" class="mjs-nestedSortable-no-nesting"&gt;&lt;div&gt;&lt;span class="disclose"&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;Sub Item 3.1 (no nesting)&lt;span title="Click to delete item." data-id="6" class="deleteMenu ui-icon ui-icon-closethick"&gt;X&lt;/span&gt;&lt;/div&gt;
                  &lt;li id="list_7"&gt;&lt;div&gt;&lt;span class="disclose"&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;Sub Item 3.2&lt;span title="Click to delete item." data-id="7" class="deleteMenu ui-icon ui-icon-closethick"&gt;X&lt;/span&gt;&lt;/div&gt;
                      &lt;ol&gt;
                          &lt;li id="list_8"&gt;&lt;div&gt;&lt;span class="disclose"&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;Sub Item 3.2.1&lt;span title="Click to delete item." data-id="8" class="deleteMenu ui-icon ui-icon-closethick"&gt;X&lt;/span&gt;&lt;/div&gt;
                      &lt;/ol&gt;
              &lt;/ol&gt;
          &lt;li id="list_9"&gt;&lt;div&gt;&lt;span class="disclose"&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;Item 4&lt;span title="Click to delete item." data-id="9" class="deleteMenu ui-icon ui-icon-closethick"&gt;X&lt;/span&gt;&lt;/div&gt;
          &lt;li id="list_10"&gt;&lt;div&gt;&lt;span class="disclose"&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;Item 5&lt;span title="Click to delete item." data-id="10" class="deleteMenu ui-icon ui-icon-closethick"&gt;X&lt;/span&gt;&lt;/div&gt;
      &lt;/ol&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>$('ol.sortable').nestedSortable({
          forcePlaceholderSize: true,
          handle: 'div',
          helper: 'clone',
          items: 'li',
          opacity: .6,
          placeholder: 'placeholder',
          revert: 250,
          tabSize: 25,
          tolerance: 'pointer',
          toleranceElement: '&gt; div',
          maxLevels: 3,
          isTree: true,
          expandOnHover: 700,
          startCollapsed: true,
          stop: function(event, ui) {
              //get item id
              var id = $(ui.item).attr('id');
              var res = id.substr(5);
  
              //check the item have child
              if($('#list_'+res).find('ol').length != 0) {
                  //The item have child!
                  $(this).parent('span.file_upload').remove();
              } else {
                  //The item don't have child!
                  //check the item have father
                  if ($('#list_'+res).parent().is('ol.sortable')) {
                      //The item don't have father
                      $('#list_'+res).find('span.file_upload').remove();
                  } else {
                      //The item have father!
                      //avoid multiple button file (only one!)
                      if ($('#list_'+res).find('span.file_upload').length == 0) {
                          //insert the file button
                          $('#list_'+res).append(
                              '&lt;span class="file_upload" title="Click to upload a file." id="res" class="deleteMenu"&gt;'
                              + '&lt;input name="upload_file" type="file" class="new_file" /&gt;'
                              + '&lt;/span&gt;');
                      }
                  }
              }
          }
  
      });
  </code></pre>