How to get HTML Element not an Object in Jquery?

220
November 25, 2017, at 3:01 PM

I want to move li list that has attribute data-formid to another ol before I remove li element itself.

However, every time I move li that has attribute data-formid to another ol, it append HTMLObject not an li element itself, I tried my code below without working.

My HMLT Markup is like below:

<ol class="example">
  <li>Account</li>
  <li>Customer</li>
  <li>Computer</li>
</ol>
<ol class="example">
  <li style="position: relative;">m1
    <a href="JavaScript:void(0)"><i class="fa fa-minus-circle" aria-hidden="true"></i></a>
    <ol class="">
      <li data-formid="ACC:ACC01" style="position: relative;">Account
        <a href="JavaScript:void(0)" style="visibility: visible;">
          <i class="fa fa-pencil" aria-hidden="true"></i>
        </a>
        <ol></ol>
      </li>
    </ol>
  </li>
</ol>

To remove and append an element to another ol I defined function removeItem(item) as below:

$(document).ready(function() {
  $('body').on('click', '.fa-minus-circle', function() {
    con = confirm('Are you sure delete this menu item?');
    if (con == true) {
      item = $(this).parentsUntil('li').parent()
      removeItem(item);
    }
  });
  function removeItem(item) {
    if (item.has('li')) {
      item.find('ol li').each(function(i, e) {
        var attr = $(this).attr('data-formid');
        // For some browsers, `attr` is undefined; for others,
        // `attr` is false.  Check for both.
        if (typeof attr !== typeof undefined && attr !== false) {
          $('ol.example:first').append('<h1>' + e + '</h1>');
          $(this).remove();
        } else {
          console.log('element has no formid');
          $(this).remove();
        }
        item.remove();
      })
    } else {
      item.remove();
    }
  }
})

From JS Script above, when I clicked on remove icon, the element being click was removed, however the element to be appended to another ol list was not an li element instead it was [object HTMLLIElement] (Fiddle JS)

How can I get li element not Object appended to another ol list?

Thanks.

READ ALSO
PHP Ajax add to cart not working

PHP Ajax add to cart not working

Hi my add to cart button is not working with ajax and i cant see where the problem isSo far when I clicked the add to cart button nothing is happening like the button is not calling the ajax function

224
Angular with Web API Bearer authentication keep failing

Angular with Web API Bearer authentication keep failing

Working on a new app with Angular 5 and Web Api version is 52

234
Putting array into an HTML table and ascending or descending them

Putting array into an HTML table and ascending or descending them

I'm trying to get a JavaScript array into an HTML table when the page loads, and then when an arrow is clicked (either up or down) it arranges them into ascending or descending order

105