Implementing JavaScript to display specific content when a list is devoid of any items

Question

Implementing JavaScript to display specific content when a list is devoid of any items

Currently, I am in the process of developing a basic contact list web application where the contacts are listed within li elements. My aim is to adjust the visibility of the text in the p#no-contacts element based on whether the containing ul has any children or not. Ideally, when the ul contains 0 children, the text should have a display: block property, and if it contains one or more children, then the text should have a display: none property. However, despite my efforts, this functionality doesn't seem to be working.

Please find the JSFiddle for reference - https://jsfiddle.net/stqyujhw/

The issue seems to lie around Line 94 in the JavaScript section:

if (contactList.children.length < 1) {
    noContactsMessage.style.display = "block";
} else if (contactList.children.length >= 1) {
    noContactsMessage.style.display = "none";
}

I am quite perplexed by what could be causing the problem. As I am still relatively new to JavaScript, any advice or guidance on troubleshooting this would be greatly appreciated. Thank you in advance.

javascript

Answer 1

Answer №1

After reviewing the fiddle link provided in the question

This specific piece of code needs to be included in both the delete and add contact event handlers. For example, the deleteContact function should contain the following statement:

 function deleteContact(e) {
    if (e.target.classList.contains("delete")) {
        if (confirm("Are you sure?")) {
            e.target.parentElement.remove();
        }
    } else if (e.target.classList.contains("fas")) {
        if (confirm("Are you sure?")) {
            e.target.parentElement.parentElement.remove();
        }
    }
    if (contactList.children.length < 1) {
       noContactsMessage.style.display = "block";
    }
// DISPLAY NO CONTACTS MESSAGE IF THERE ARE NO CONTACTS


}

Similarly, the add function should be structured as follows:

function addContact(e) {
    e.preventDefault();
    const nameValue = addForm.querySelector("#name-input").value;
    const numberValue = addForm.querySelector("#number-input").value;
    const li = document.createElement("li");

    const nameSpan = document.createElement("span");
    nameSpan.classList.add("name");
    nameSpan.textContent = nameValue;

    const numberSpan = document.createElement("span");
    numberSpan.classList.add("number");
    numberSpan.textContent = numberValue;

    const deleteButton = document.createElement("span");
    deleteButton.classList.add("delete");
    const delIcon = document.createElement("i");
    delIcon.className = "fas fa-user-minus";
    deleteButton.appendChild(delIcon);

    li.appendChild(nameSpan);
    li.appendChild(numberSpan);
    li.appendChild(deleteButton);
    contactList.appendChild(li);
    if (contactList.children.length >= 1) {
    noContactsMessage.style.display = "none";
 } 
}

Your code logic wasn't executing within the event handlers causing unexpected behavior.

Answer 2

After reviewing the fiddle link provided in the question

This specific piece of code needs to be included in both the delete and add contact event handlers. For example, the deleteContact function should contain the following statement:

 function deleteContact(e) {
    if (e.target.classList.contains("delete")) {
        if (confirm("Are you sure?")) {
            e.target.parentElement.remove();
        }
    } else if (e.target.classList.contains("fas")) {
        if (confirm("Are you sure?")) {
            e.target.parentElement.parentElement.remove();
        }
    }
    if (contactList.children.length < 1) {
       noContactsMessage.style.display = "block";
    }
// DISPLAY NO CONTACTS MESSAGE IF THERE ARE NO CONTACTS


}

Similarly, the add function should be structured as follows:

function addContact(e) {
    e.preventDefault();
    const nameValue = addForm.querySelector("#name-input").value;
    const numberValue = addForm.querySelector("#number-input").value;
    const li = document.createElement("li");

    const nameSpan = document.createElement("span");
    nameSpan.classList.add("name");
    nameSpan.textContent = nameValue;

    const numberSpan = document.createElement("span");
    numberSpan.classList.add("number");
    numberSpan.textContent = numberValue;

    const deleteButton = document.createElement("span");
    deleteButton.classList.add("delete");
    const delIcon = document.createElement("i");
    delIcon.className = "fas fa-user-minus";
    deleteButton.appendChild(delIcon);

    li.appendChild(nameSpan);
    li.appendChild(numberSpan);
    li.appendChild(deleteButton);
    contactList.appendChild(li);
    if (contactList.children.length >= 1) {
    noContactsMessage.style.display = "none";
 } 
}

Your code logic wasn't executing within the event handlers causing unexpected behavior.

Answer 3

Answer №2

The specified code does not run every time a li is deleted or added. Instead, it only runs once during the initial loading. To fix this, place the code in the event handler for the corresponding actions.

Answer 4

The specified code does not run every time a li is deleted or added. Instead, it only runs once during the initial loading. To fix this, place the code in the event handler for the corresponding actions.

Implementing JavaScript to display specific content when a list is devoid of any items

Answer №1

Answer №2

Similar questions

Utilizing a feature module imported from a separate Angular4 project

Are there any JS/jQuery plugins available for sliding animations that include slideLeft and slideRight functions, similar to the slideUp and slideDown functions?

JavaScript utilizing an API to retrieve specific data values

Tabs within the AutoComplete popup in Material-UI

Here is the process to make a GET request to an API with input parameters using JQuery and JavaScript in an Asp.net view when a particular tag

Does Google's web crawler have the ability to index content created by javascript?

Creating a grid UI in AngularJS using Typescript: utilizing functions as column values

Attempting to conceal the API, however, the backend is throwing an error

The Shopify storefront API's create cart mutation generates an HTML response when called

When implementing jQuery for scrolling on a website, touch gestures may become unresponsive on Safari for iOS devices

Encountering a CORS policy issue while attempting to retrieve data from an API

Javascript Select Element with No Options

Is there a way to handle button click event when utilizing this.props.children in React?

"Utilize Ajax to trigger a custom alert message once data is loaded and ready

Simplified jQuery function for multiple div mouseover operations

Is it possible to pre-select a value in a PrimeVue Dropdown component?

Google Chrome's development tools are unable to detect the manifest

Changing the data of a child component that is passed through slots from a parent component in Vue.js

"The Django querydict receives extra empty brackets '[]' when using jQuery ajax post to append items to a list in the app

Issue with JQuery: Inability to deactivate an element after receiving an Ajax response