Shuhlya,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.hide ~ li{
display: none
}
</style>
<script>
window.addEventListener('DOMContentLoaded', function() {
var node = document.querySelectorAll('li'), num = 5, len = node.length-1,
but = document.querySelector('.but');
but.addEventListener('click', function() {
document.querySelector('.hide').classList.remove('hide');
num += 6;
if(num < len) node[num].classList.add("hide");
else but.parentNode.removeChild(but);
});
});
</script>
</head>
<body>
<ul>
<li >1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li class="hide">6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
<li>32</li>
<li>33</li>
<li>34</li>
<li>35</li>
<li>36</li>
</ul>
<input class="but" name="" type="button" value="more">
</body>
</html>