Removing particular <li> elements with JavaScript

Question

Removing particular <li> elements with JavaScript

It appears that the function is unable to delete the Node containing the specified value unless it is the first value (such as 'apples'). Additionally, the for loop needs to run twice before any deletion occurs. What could be causing this behavior?

function removeSpec()
{
    var query = document.getElementById('spec').value;  /* User input value */
    elements = document.getElementsByClassName('fruit'); /* Get the li elements in the list */
    var myList = document.getElementById("myList3"); /* Reference to the list */
    var length = (document.getElementsByClassName('fruit').length); /* Number of li elements */
    var checker = 'false'; /* Boolean variable to track if value was found */

    for(var counter = 0; counter < length; counter ++)
    {
        if (elements[counter].textContent == query )
        {
             alert("Counter : " + counter);
             myList.removeChild(myList.childNodes[ (counter) ]);
            checker="true";
        }
    }
  if (checker == "false") 
   {
       alert("Not Found");
   }
}

The corresponding HTML:

<ul id="myList3">
    <li class="fruit" >Apples</li>
    <li class="fruit" >Oranges</li>
    <li class="fruit" >Banannas</li>
    <li class="fruit">Strawberry</li>
</ul>
<form>
    Value: <input type="text" name="" value="" id="spec">
<br><br>
</form>
<button type="button" style="height:20px;width:200px" href="javascript:void(0)" onclick="removeSpec()" >

Remove Specified
</button>

javascript dom

Answer 1

Answer №1

childNodes returns a list of all child nodes, including text nodes. In between each <li> element, there is a text node that contains spaces and a line break. Therefore, childNodes actually returns a list of 9 nodes, not the assumed 4 nodes (

document.getElementsByClassName('fruit').length

).

To filter out only element nodes, you can use .children instead of .childNodes. It's even better to use elements, as you are iterating over elements specifically.

It's important to stop the iteration after removing a node to avoid accessing non-existing positions in the list.

function removeSpec()
{
    var query = document.getElementById('spec').value;  /* Value inputted by user */
    elements = document.getElementsByClassName('fruit'); /* Get the li elements in the list */
    var myList = document.getElementById("myList3"); /* Var to reference the list */
    var length = (document.getElementsByClassName('fruit').length); /* # of li elements */
    var checker = 'false'; /* boolean-ish value to determine if value was found */

    for(var counter = 0; counter < length; counter ++)
    {
        if (elements[counter].textContent == query )
        {
             myList.removeChild(myList.children[ (counter) ]);
             // better: myList.removeChild(elements[counter]);
             checker="true";
             break;
        }
    }
  if ( checker == "false") 
   {
       alert("Not Found");
   }
}

<ul id="myList3">
                <li class="fruit" >Apples</li>
                <li class="fruit" >Oranges</li>
                <li class="fruit" >Banannas</li>
                <li class="fruit">Strawberry</li>
   </ul>
   <form> 
           Value: <input type="text" name="" value="" id="spec">
   <br><br>
    </form>
    <button type="button" style="height:20px;width:200px" href="javascript:void(0)" onclick="removeSpec()" > 

        Remove Specified 
   </button>

There are other potential improvements, such as assigning an actual boolean value to checker, but they are not directly related to your original question.

Answer 2

childNodes returns a list of all child nodes, including text nodes. In between each <li> element, there is a text node that contains spaces and a line break. Therefore, childNodes actually returns a list of 9 nodes, not the assumed 4 nodes (

document.getElementsByClassName('fruit').length

).

To filter out only element nodes, you can use .children instead of .childNodes. It's even better to use elements, as you are iterating over elements specifically.

It's important to stop the iteration after removing a node to avoid accessing non-existing positions in the list.

function removeSpec()
{
    var query = document.getElementById('spec').value;  /* Value inputted by user */
    elements = document.getElementsByClassName('fruit'); /* Get the li elements in the list */
    var myList = document.getElementById("myList3"); /* Var to reference the list */
    var length = (document.getElementsByClassName('fruit').length); /* # of li elements */
    var checker = 'false'; /* boolean-ish value to determine if value was found */

    for(var counter = 0; counter < length; counter ++)
    {
        if (elements[counter].textContent == query )
        {
             myList.removeChild(myList.children[ (counter) ]);
             // better: myList.removeChild(elements[counter]);
             checker="true";
             break;
        }
    }
  if ( checker == "false") 
   {
       alert("Not Found");
   }
}

<ul id="myList3">
                <li class="fruit" >Apples</li>
                <li class="fruit" >Oranges</li>
                <li class="fruit" >Banannas</li>
                <li class="fruit">Strawberry</li>
   </ul>
   <form> 
           Value: <input type="text" name="" value="" id="spec">
   <br><br>
    </form>
    <button type="button" style="height:20px;width:200px" href="javascript:void(0)" onclick="removeSpec()" > 

        Remove Specified 
   </button>

There are other potential improvements, such as assigning an actual boolean value to checker, but they are not directly related to your original question.

Answer 3

Answer №2

Executing this script will require you to incorporate the following instruction

elements[counter].remove();

in place of the current line

myList.removeChild(myList.childNodes[ (counter) ]);

Answer 4

Executing this script will require you to incorporate the following instruction

elements[counter].remove();

in place of the current line

myList.removeChild(myList.childNodes[ (counter) ]);

Answer 5

Answer №3

Try a different approach instead of using a for loop.

Take a look at this code snippet:

function removeSpec() {
  var query = document.getElementById('spec').value; /* Input value from user */
  var elements = document.getElementsByClassName('fruit'); /* Get the li elements in the list */
  var myList = document.getElementById("myList3"); /* Reference to the list */
  var length = (document.getElementsByClassName('fruit').length); /* Number of li elements */
  var checker = 'false'; /* Boolean value to track if value was found */

  myList.querySelectorAll('li').forEach(function(item) {
    if (item.innerHTML == query)
      item.remove();
  });
}

<ul id="myList3">
  <li class="fruit">Apples</li>
  <li class="fruit">Oranges</li>
  <li class="fruit">Banannas</li>
  <li class="fruit">Strawberry</li>
</ul>
<form>
  Value:
  <input type="text" name="" value="" id="spec">
  <br>
  <br>
</form>
<button type="button" style="height:20px;width:200px" href="javascript:void(0)" onclick="removeSpec()">

  Remove Specified
</button>

Hope this solution proves useful!

Answer 6

Try a different approach instead of using a for loop.

Take a look at this code snippet:

function removeSpec() {
  var query = document.getElementById('spec').value; /* Input value from user */
  var elements = document.getElementsByClassName('fruit'); /* Get the li elements in the list */
  var myList = document.getElementById("myList3"); /* Reference to the list */
  var length = (document.getElementsByClassName('fruit').length); /* Number of li elements */
  var checker = 'false'; /* Boolean value to track if value was found */

  myList.querySelectorAll('li').forEach(function(item) {
    if (item.innerHTML == query)
      item.remove();
  });
}

<ul id="myList3">
  <li class="fruit">Apples</li>
  <li class="fruit">Oranges</li>
  <li class="fruit">Banannas</li>
  <li class="fruit">Strawberry</li>
</ul>
<form>
  Value:
  <input type="text" name="" value="" id="spec">
  <br>
  <br>
</form>
<button type="button" style="height:20px;width:200px" href="javascript:void(0)" onclick="removeSpec()">

  Remove Specified
</button>

Hope this solution proves useful!

Answer 7

Answer №4

It may sound unconventional, but Chrome seems to interpret your HTML unordered list in a unique way:

NodeList[9]
0: text
1: li.fruit
2: text
3: li.fruit
4: text
5: li.fruit
6: text
7: li.fruit
8: text
length: 9
__proto__: NodeList

Essentially, it looks like Chrome is creating a text node for each newline within the <li> tag of your unordered list. This explains why deletion only occurs after the function is called twice - it first deletes the text node, then proceeds to delete the element.

To overcome this issue, you can simply adjust your HTML structure as follows (although it may not be aesthetically pleasing):

<ul id="myList3"><li class="fruit">Apples</li><li class="fruit">Oranges</li><li class="fruit">Banannas</li><li class="fruit">Strawberry</li></ul>

There are some potential solutions you can explore. For instance, you could experiment with using the childNode.remove() method, although browser support may vary.

Alternatively, a workaround like the following might also prove effective:

selectedChildNode.parentNode.removeChild(selectedChildNode);

Answer 8

It may sound unconventional, but Chrome seems to interpret your HTML unordered list in a unique way:

NodeList[9]
0: text
1: li.fruit
2: text
3: li.fruit
4: text
5: li.fruit
6: text
7: li.fruit
8: text
length: 9
__proto__: NodeList

Essentially, it looks like Chrome is creating a text node for each newline within the <li> tag of your unordered list. This explains why deletion only occurs after the function is called twice - it first deletes the text node, then proceeds to delete the element.

To overcome this issue, you can simply adjust your HTML structure as follows (although it may not be aesthetically pleasing):

<ul id="myList3"><li class="fruit">Apples</li><li class="fruit">Oranges</li><li class="fruit">Banannas</li><li class="fruit">Strawberry</li></ul>

There are some potential solutions you can explore. For instance, you could experiment with using the childNode.remove() method, although browser support may vary.

Alternatively, a workaround like the following might also prove effective:

selectedChildNode.parentNode.removeChild(selectedChildNode);

Answer 9

Answer №5

One issue arises in the code snippet at

myList.removeChild(myList.childNodes[ (counter) ]);

because the myList.childNodes node returns 8 values instead of 4. The elements array has only 4 nodes, resulting in a discrepancy when removing elements from it.

You can test the following revised code:

function removeSpec() {
        var query = document.getElementById('spec').value;
        elements = document.getElementsByClassName('fruit');

        var myList = document.getElementById("myList3"); 
        var length = elements.length; 
        var checker = 'false'; 

        for(var counter = 0; counter < length; counter ++)
        {           
            if (elements[counter].textContent == query )
            {
                 alert("Counter : " + counter);
                 myList.removeChild(elements[counter]);
                 checker="true";
            }
        }
      
      if ( checker == "false") 
       {
           alert("Not Found");
       }
}

Answer 10

One issue arises in the code snippet at

myList.removeChild(myList.childNodes[ (counter) ]);

because the myList.childNodes node returns 8 values instead of 4. The elements array has only 4 nodes, resulting in a discrepancy when removing elements from it.

You can test the following revised code:

function removeSpec() {
        var query = document.getElementById('spec').value;
        elements = document.getElementsByClassName('fruit');

        var myList = document.getElementById("myList3"); 
        var length = elements.length; 
        var checker = 'false'; 

        for(var counter = 0; counter < length; counter ++)
        {           
            if (elements[counter].textContent == query )
            {
                 alert("Counter : " + counter);
                 myList.removeChild(elements[counter]);
                 checker="true";
            }
        }
      
      if ( checker == "false") 
       {
           alert("Not Found");
       }
}

Answer 11

Answer №6

The array called myList consists of li elements, therefore using removeChild on myList is not logically correct.

In addition, using myList.childNodes in this context does not make sense.

Instead, consider trying:

myList[counter].parentNode.removeChild(myList[counter]);

Answer 12

The array called myList consists of li elements, therefore using removeChild on myList is not logically correct.

In addition, using myList.childNodes in this context does not make sense.

Instead, consider trying:

myList[counter].parentNode.removeChild(myList[counter]);

Removing particular <li> elements with JavaScript

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Having trouble loading environment variables in NextJS on Heroku?

Solution to bypass JavaScript PHP login system

Troubleshooting Issue: XMLHttpRequest Incompatibility with Internet Explorer

Guide to programmatically configuring meta title, description, and image in a Vue.js project with the help of Vue Unhead and Vue Meta

Tips for building a task list using JavaScript only

Merge two distinct arrays of objects based on a shared field

"Trying to access jQuery .slide and .slideUp features, but unfortunately they are

Update the content of <p> depending on the selections made in two <select> elements

I'm wondering, on a storybook, where is the best place to set my MUI X license key

Unusual outcomes stemming from JavaScript nested for loops

Encountering an issue when trying to generate a button in Angular

`How can I retrieve a PHP variable using a JavaScript AJAX request?`

Tips for sequentially executing URL requests in Node.JS without triggering a stack overflow

Utilizing a foundational element to automatically unsubscribe from multiple observable subscriptions

Issue with Vue multiselect not updating selections

When JavaScript evaluates special characters in HTML, it interrupts the function call within an AJAX response

Initiate an animation as you scroll down

Error: The default export is not a component compatible with React in the specified page: "/"

Tips on deleting specific elements from an array by utilizing the splice method

The template in Typescript is constrained