clearElement DOM not working (JavaScript)-CodePudding

I'm trying to create a to-do-list. I think I've created the CSS design and done all the HTML markup correctly. However, when I'm trying to use clearElement() to remove my HTML markup of the taskContainer to allow the user input their own task (blank value as default). But my code does not seem to work.

HTML Code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css2?family=Ruda:wght@400;500;600;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
    <script defer src="script.js"></script>
    <title>To-do List</title>
  </head>
  <body>
    <h1 >To-Do List</h1>

    <div >
      <h2 >Task list</h2>
      <ul  data-lists>
        <li >Work</li>
        <li >Study</li>
        <li >Youtube</li>
      </ul>

      <form  action="" data-new-list-form>
        <input
          type="text"
          
          data-new-list-input
          placeholder="New list name"
          aria-label="New list name"
        />
        <button  aria-label="create new list">Add</button>
      </form>
    </div>

    <div  data-list-display-container>
      <div >
        <h2  data-list-title>Daily Task</h2>
        <p  data-list-count>3 task remaining</p>
      </div>

      <div >
        <div  data-tasks></div>
        <div >
          <input type="checkbox" id="task-1" />
          <label for="task-1">
            <span ></span>
            Task 1
          </label>
        </div>
        <!-- Task 1  -->

        <div >
          <input type="checkbox" id="task-2" />
          <label for="task-2">
            <span ></span>
            Task 2
          </label>
        </div>
        <!-- Task 2  -->

        <div >
          <input type="checkbox" id="task-3" />
          <label for="task-3">
            <span ></span>
            Task 3
          </label>
        </div>
        <!-- Task 3  -->

        <div >
          <form action="" data-new-task-form>
            <input
              type="text"
              data-new-task-input
              
              placeholder="New task"
              aria-label="New task"
            />
            <button  aria-label="create new task"> </button>
          </form>
        </div>
        <div >
          <button >Clear task</button>
          <button  data-delete-list-btn>Delete list</button>
        </div>
      </div>
    </div>
    <template id="task-template">
      <div >
        <input type="checkbox" id="task-3" />
        <label for="task-3">
          <span ></span>
        </label>
      </div>
    </template>
  </body>
</html>

Javascript Code:

const listsContainer = document.querySelector('[data-lists]')
const newListForm = document.querySelector('[data-new-list-form]')
const newListInput = document.querySelector('[data-new-list-input]')
const deleteListButton = document.querySelector('[data-delete-list-btn]')
const listDisplayContainer = document.querySelector('[data-list-display-container]')
const listTitlElement = document.querySelector('[data-list-title]')
const listCountElement = document.querySelector('[data-list-count]')
const taskContainer = document.querySelector('[data-tasks]')
const taskTemplate = document.getElementById('task-template')
const newTaskForm = document.querySelector('[data-new-task-form]')
const newTaskInput = document.querySelector('[data-new-task-input]')


const LOCAL_STORAGE_LIST_KEY = 'task.list'
const LOCAL_STORAGE_SELECTED_LIST_ID_KEY = 'task.selectedListID'
let lists = JSON.parse(localStorage.getItem(LOCAL_STORAGE_LIST_KEY))||[]
let selectedListId = localStorage.getItem(LOCAL_STORAGE_SELECTED_LIST_ID_KEY)

listsContainer.addEventListener('click', e =>{
    if (e.target.tagName.toLowerCase() === 'li'){
        selectedListId = e.target.dataset.listId
        saveAndRender()
    }
})



newListForm.addEventListener('submit', e =>{
    e.preventDefault()
    const listName = newListInput.value
    if (listName == null || listName === '') return
    const list = createList(listName)
    newListInput.value = null
    lists.push(list)
    saveAndRender()
})
newTaskForm.addEventListener('submit', e =>{
    e.preventDefault()
    const taskName = newTaskInput.value
    if (taskName == null || taskName === '') return
    const task = createTask(taskName)
    newTaskInput.value = null
    const selectedList = lists.find(list => list.id === selectedListId)
    selectedList.task.push(task)
    saveAndRender()
})

deleteListButton.addEventListener('click', e =>{
    lists = lists.filter(list => list.id !== selectedListId)
    selectedListId = null
    saveAndRender()
})

function createList(name){
  return {id: Date.now().toString(), name: name, tasks: []}
}

function createTask(name){
  return {id: Date.now().toString(), name: name, complete: false}
}

function saveAndRender(){
    save()
    render()
}
function save(){
    localStorage.setItem(LOCAL_STORAGE_LIST_KEY, JSON.stringify(lists))
    localStorage.setItem(LOCAL_STORAGE_SELECTED_LIST_ID_KEY, selectedListId)
}

function render(){
    clearElement(listsContainer)
    renderLists()


    const selectedList = lists.find(list => list.id === selectedListId)

    if(selectedListId == null){
       listDisplayContainer.style.display = 'none' 
    } else {
        listDisplayContainer.style.display = ''
        listTitlElement.innerText = selectedList.name
        renderTaskCount(selectedList)
        clearElement(taskContainer)
        renderTasks(selectedList)
        
    }
}

function renderTasks(selectedList){
    selectedList.tasks.forEach(task =>{
        const taskElement = document.importNode(taskTemplate.content, true)
        const checkbox = taskElement.querySelector('input')
        checkbox.id = task.id
        checkbox.checked = task.complete
        const label = taskElement.querySelector('label')
        label.htmlFor = task.id
        label.append(task.name)
        taskContainer.appendChild(taskElement)
    })
}

function renderTaskCount(selectedList){
    const incompleteTaskCount = selectedList.tasks.filter(task => !task.complete).length
    const taskString = incompleteTaskCount === 1 ? "task" : "tasks"
    listCountElement.innerText = `${incompleteTaskCount} ${taskString} remaining`
}

function renderLists(){
    lists.forEach(list =>{
        const listElement = document.createElement('li')
        listElement.dataset.listId = list.id
        listElement.classList.add("list-name")
        listElement.innerText = list.name
        if (list.id === selectedListId){ 
            listElement.classList.add('active-list')
        }
        listsContainer.appendChild(listElement)

    })
}

function clearElement(element){
    while (element.firstChild){
        element.removeChild(element.firstChild)
    }
    
}

render()

What I had expected to happen is: the tasks on the right side should disappear (Task 1, Task 2, Task 3) and allow the user to input their own tasks.

CodePudding user response：

You haven't specified the the clearElement() with anything, e.g. browser.clearElement().
Hope this solves it completely.