javascript remove li without removing ul?

StackOverflow https://stackoverflow.com/questions/18795028

Question

Is there any way to remove the li elements of a ul without also removing the ul? I can only seem to find this.

var element = document.getElementById('myList');
element.parentNode.removeChild(element);

But, this removes the ul. I'm hoping to be able to remove and append li elements on the fly without also having to createElement the ul every time I remove li elements. Just looking for a simpler way. Thanks for any help.

<div id="listView">
  <ul id="myList" class="myList-class">
    <li>item 1</li>
    <li>item 2</li>
  </ul>
</div>
Was it helpful?

Solution

You can do something like this.

var myList = document.getElementById('myList');
myList.innerHTML = '';

If you are using jQuery

$('#myList').empty();

Both of these will remove EVERYTHING inside the list.

OTHER TIPS

This should do the trick:

var lis = document.querySelectorAll('#myList li');
for(var i=0; li=lis[i]; i++) {
    li.parentNode.removeChild(li);
}

Demo http://jsfiddle.net/krasimir/UhhuX/

The reason it's removing the ul is because you have the element variable pointing to the ul. Your next line of code then moves up to the parent (#listView) and applies the removechild method with the element variable (which points to ul element) passed to it.

If you need to remove all the li elements then you can use:

document.getElementById('myList').innerHTML = '';

which will empty the ul completely. If you need to remove selected li elements then you can traverse from #myList to the particular child elements using something like:

var ulElem = document.getElementById('myList');

ulElem.removeChild(ulElem.childNodes[i])

where i is the index of the li you want to remove (0 for 1st, 1 for 2nd, etc.)

For reference: https://developer.mozilla.org/en-US/docs/Web/API/Node.removeChild

const li = document.querySelectorAll(".list-item-class");
for(let i = 0; i <= li.length; i++ ){
    l = li[i];
    l.remove();
}

As long as we have a first child - remove it. (which will be as long as we have even one member).

  const removeNodesFromList = () => {
    const nodes = document.querySelector('.ul-class-selector');
    while (nodes.firstChild) {
      nodes.removeChild(nodes.firstChild);
    }
  };


let ol = document.querySelector("ol");

function addItem() {
  let lastIndex = ol.childElementCount;
  let li = document.createElement("li");
  li.dataset.index = lastIndex;
  let a = document.createElement("a");
  a.href = "#";
  a.innerHTML = " Remove";
  a.addEventListener("click", function(e) {
    e.preventDefault();
    let index = e.target.parentNode.dataset.index;
    removeItem(parseInt(index));
  })
  li.appendChild(a);
  ol.appendChild(li);
}

function removeItem(i) {
  let li = ol.children[parseInt(i)];
  ol.removeChild(li);
  for (let j = i; j < ol.childElementCount; j++) {
    let li = ol.children[j];
    li.dataset.index = j;
  }
}

addItem();
<ol>
</ol>
<button onclick="addItem()">Add</button>

The way I solve this problem is that. I create the deletion feature within the creation function:

HTML

<body>
    <div class="myclass">
        <h1>TODO App</h1>
        <!-- user input -->
        <input class="user_input" type="mytext" name="mytext" placeholder="Enter text">
        <button class="mybutton">Add</button>
    </div>
    <div>
        <ul class="ul-container"></ul>
    </div>
</body>

JavaScript

function creation() {
    const userInput = document.querySelector(".user_input").value;
    const ulContianer = document.querySelector(".ul-container");

    console.log(userInput);
    if (userInput !== "") {
        let li = document.createElement("li");
        let test = document.createTextNode(userInput);
        li.append(test);
        li.addEventListener('click', function (e) {
            li.parentNode.removeChild(li);
        })
        ulContianer.appendChild(li);
        document.querySelector(".user_input").value = "";
    }
}

So after you create it. Once you click li element, it will gone.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top