// Функция удаления элементов
function deleteChilds() {
   var ul = document.getElementsByTagName("ul")[0];  // Получить родительский DOM
   // Определите, содержит ли он дочерние элементы
   if(ul.hasChildNodes()) {
     var len = ul.childNodes.length;  // количество дочерних элементов
     for(var i = 0;i<len;i++) {       // Траверс
        ul.removeChild(ul.childNodes[0]);  // Удалить, начиная с первого элемента
     }

   }
}

<ul>
    <li>coder.itclan.cn</li>
    <li>itclan.cn</li>
    <li>aikelaidev.cn</li>
    <li>pay.aikelaidev.cn</li>
</ul>

function deleteChilds() {
   var ul = document.getElementsByTagName("ul")[0];  // Получить родительский DOM
   
   var len = ul.childNodes.length;  // количество дочерних элементов
   for(var i = 0;i<len;i++) {       // Траверс
        console.log(ul.childNodes[i].nodeName)
        ul.removeChild(ul.childNodes[i]);  // Удалить, начиная с первого элемента
   }
}

function deleteChilds() {
   var ul = document.getElementsByTagName("ul")[0];  // Получить родительский DOM
   
   var len = ul.childNodes.length;  // количество дочерних элементов
   for(var i = len-1;i>=0;i--) {       // сзади вперед
        ul.removeChild(ul.childNodes[i]);  // Удалить, начиная с первого элемента
   }
}

<template>
    <div class="wrap">
         <div>
               <ul id="ul">
                  <li  v-for="(item,index) in lists" :key="index"><span>{{item}}</span><el-button  type="danger" @click="handleDelteItem(index)" size="mini">удалить</el-button></li>
               </ul> 
         </div>
         <div class="deletAllBtn">
            <el-button type="primary" @click="handleDelete">удалитьвсе элементы</el-button>
         </div>   
    </div>
</template>

<script>
    export default {
        name: 'deleteChildELem',
        data() {
            return {
                lists: ["coder.itclan.cn",'itclan.cn','tv.itclan.cn','short.itclan.cn','aikelaidev.cn']
            }
        },

        methods: {
            handleDelete() {
                // this.lists = [];  // Если вы используете мышление программирования Vue, удаляете все подэлементы и напрямую управляете массивом, чтобы он стал пустым, все подэлементы будут удалены.
                // Это реализовано с использованием встроенного js, в основном для демонстрации того, как работать с дочерними узлами. Если в проекте vue вы работаете с DOM, использование vue не будет иметь никакого смысла или ценности.
                var ul = document.getElementById('ul');// Получить DOM родительского элемента
                // Определите, содержит ли он дочерние элементы
                if(ul.hasChildNodes()) {
                    var len = ul.childNodes.length;  // количество дочерних элементов
                    for(var i = 0;i<len;i++) {
                        ul.removeChild(ul.childNodes[0]);  // Удалить, начиная с первого элемента
                    }
                }

                // Это также может быть эквивалентно следующему: удаление узлов в обратном порядке.
                /**
                 *
                 *  for(var i = ul.childNodes.length-1;i>=0;i--) {
                        ul.removeChild(ul.childNodes[i])
                    }
                 * 
                 */

            },

            handleDelteItem(index) {
                // Если вы используете vue, то достаточно метода непосредственного управления массивом, и его можно решить одной строкой кода.
                this.lists.splice(index,1);
            }
        }
    }
</script>

<style lang="scss" scoped>
.wrap {
    text-align:center;
}

span{
    display:inline-block;
    width: 200px;
}

ul>li {
  margin-bottom: 5px;
  border-bottom: 1px dashed #ccc;
}

.deletAllBtn {
    margin-top: 20px;
}
</style>