0

Есть элемент интерфейса - список 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 коде)?

3
  • что значит удалить содержимое в js,jquery коде? 1 мар 2021 в 8:22
  • думаю innerHtml = "" 1 мар 2021 в 8:22
  • @АлексейШиманский удаление производится в js и jquery коде.
    – goodsoft
    1 мар 2021 в 8:24

2 ответа 2

2

$('#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>

1

Если на 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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.