Move list items up or down

Using vanilla JS. Answer to https://stackoverflow.com/questions/31046590/move-items-in-ul-li-up-and-down?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa

by termite82

HTML

<ul id="ul_li_SubCategories" style="100%" class="chargeCapturetable margin0">
  <li sequence="1" title="Category 1" class="liEllipsis" value="9">
    <a href="#"><span class="viewIcons delFaceName _delete fl"></span>Category 1</a>
    <button class="moveup">Move Up</button><button class="movedown">Move Down</button>
  </li>
  <li sequence="2" title="Category 3" class="liEllipsis" value="11">
    <a href="#"><span class="viewIcons delFaceName _delete fl"></span>Category 3</a>
    <button class="moveup">Move Up</button><button class="movedown">Move Down</button>
  </li>
  <li sequence="4" title="Category 4" class="liEllipsis" value="12">
    <a href="#"><span class="viewIcons delFaceName _delete fl"></span>Category 4</a>
    <button class="moveup">Move Up</button><button class="movedown">Move Down</button>
  </li>
  <li sequence="5" title="Category 6" class="liEllipsis" value="22">
    <a href="#"><span class="viewIcons delFaceName _delete fl"></span>Category 6</a>
    <button class="moveup">Move Up</button><button class="movedown">Move Down</button>
  </li>
  <li sequence="6" title="Category 5" class="liEllipsis" value="13">
    <a href="#"><span class="viewIcons delFaceName _delete fl"></span>Category 5</a>
    <button class="moveup">Move Up</button><button class="movedown">Move Down</button>
  </li>
  <li sequence="7" title="Category 7" class="liEllipsis" value="55">
    <a href="#"><span class="viewIcons delFaceName _delete fl"></span>Category 7</a>
    <button class="moveup">Move Up</button><button class="movedown">Move Down</button>
  </li>
  <li sequence="99999" title="Category 8" class="liEllipsis" value="62">
    <a href="#"><span class="viewIcons delFaceName _delete fl"></span>Category 8</a>
    <button class="moveup">Move Up</button><button class="movedown">Move Down</button>
  </li>
</ul>

CSS

li {
  list-style-type: none;
}

a {
  margin-right: 20px;
}

button {
  width: 150px;
  text-align: center;
}

li:first-child .moveup {
  display: none;
}

li:last-child .movedown {
  display: none;
}

JavaScript

const listUl = document.getElementById('ul_li_SubCategories');

listUl.addEventListener("click", (event) => {

  let li = event.target.parentNode;

  if (event.target.className === 'moveup') {
    listUl.insertBefore(li, li.previousElementSibling);
  }
  if (event.target.className === 'movedown') {
    listUl.insertBefore(li.nextElementSibling, li);
  }

});