Удаление содержимого элемента с определенным id

Question

Есть элемент интерфейса - список ul с id=sidemenu

<ul id="sidemenu">
  <li>
    <div class="leftside">
      <i class="fa fa-home"></i>
    </div>
    <div class="centerplace">
      <a href="" class="nestedblock">Техника для кухни</a>
    </div>
    <div class="rightside">
      <i class="fa fa-home"></i>
    </div>
  </li>
  <li>
    <div class="leftside">
      <i class="fa fa-home"></i>
    </div>
    <div class="centerplace">
      <a href="" class="nestedblock">Бытовая техника для дома</a>
    </div>
    <div class="rightside">
      <i class="fa fa-home"></i>
    </div>
  </li>
  <li>
    <div class="leftside">
      <i class="fa fa-home"></i>
    </div>
    <div class="centerplace">
      <a href="" class="nestedblock">Ноутбуки и компьютеры</a>
    </div>
    <div class="rightside">
      <i class="fa fa-home"></i>
    </div>
  </li>
  <li>
    <div class="leftside">
      <i class="fa fa-home"></i>
    </div>
    <div class="centerplace">
      <a href="" class="nestedblock">Комплектующие</a>
    </div>
    <div class="rightside">
      <i class="fa fa-home"></i>
    </div>
  </li>
  </li>
</ul>

Каким образом можно удалить содержимое этого элемента (не сам элемент, а его содержимое) в js и jquery коде (удаление производится в js и jquery коде)?

Answer 1

$('#sidemenu').html(''); // Jquery

document.getElementById('sidemenu').innerHTML = ''; // vanillaJS

ul {
  border: 1px solid black;
  height: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<ul id="sidemenu">
  <li>
    <div class="leftside">
      <i class="fa fa-home"></i>
    </div>
    <div class="centerplace">
      <a href="" class="nestedblock">Техника для кухни</a>
    </div>
    <div class="rightside">
      <i class="fa fa-home"></i>
    </div>
  </li>
  <li>
    <div class="leftside">
      <i class="fa fa-home"></i>
    </div>
    <div class="centerplace">
      <a href="" class="nestedblock">Бытовая техника для дома</a>
    </div>
    <div class="rightside">
      <i class="fa fa-home"></i>
    </div>
  </li>
  <li>
    <div class="leftside">
      <i class="fa fa-home"></i>
    </div>
    <div class="centerplace">
      <a href="" class="nestedblock">Ноутбуки и компьютеры</a>
    </div>
    <div class="rightside">
      <i class="fa fa-home"></i>
    </div>
  </li>
  <li>
    <div class="leftside">
      <i class="fa fa-home"></i>
    </div>
    <div class="centerplace">
      <a href="" class="nestedblock">Комплектующие</a>
    </div>
    <div class="rightside">
      <i class="fa fa-home"></i>
    </div>
  </li>
  </li>
</ul>

Answer 2

Если на JS делать то можно так

clear.addEventListener("click", ()=>{
   sidemenu.innerHTML = "";
})

clearItems.addEventListener("click", ()=>{
   var items = sidemenu.getElementsByTagName("li");
   [...items].forEach(item => item.innerHTML = "");   
})

<ul id="sidemenu">
  <li>
    <div class="leftside">
      <i class="fa fa-home"></i>
    </div>
    <div class="centerplace">
      <a href="" class="nestedblock">Техника для кухни</a>
    </div>
    <div class="rightside">
      <i class="fa fa-home"></i>
    </div>
  </li>
  <li>
    <div class="leftside">
      <i class="fa fa-home"></i>
    </div>
    <div class="centerplace">
      <a href="" class="nestedblock">Бытовая техника для дома</a>
    </div>
    <div class="rightside">
      <i class="fa fa-home"></i>
    </div>
  </li>
  <li>
    <div class="leftside">
      <i class="fa fa-home"></i>
    </div>
    <div class="centerplace">
      <a href="" class="nestedblock">Ноутбуки и компьютеры</a>
    </div>
    <div class="rightside">
      <i class="fa fa-home"></i>
    </div>
  </li>
  <li>
    <div class="leftside">
      <i class="fa fa-home"></i>
    </div>
    <div class="centerplace">
      <a href="" class="nestedblock">Комплектующие</a>
    </div>
    <div class="rightside">
      <i class="fa fa-home"></i>
    </div>
  </li>
  </li>
</ul>

<button id="clear">Clear All</button>

<button id="clearItems">Clear list data</button>

БЛОГ НА HUSL

Удаление содержимого элемента с определенным id

Ответы (2 шт):