Список дел

Здесь я пытаюсь удалить задачу, которая является элементом списка, изначально использующим значок корзины из FontAwesome. Я пытаюсь понять, как добавить этот значок при создании новой задачи (элемента списка) . Помимо этого, я также хочу удалить задачу, когда пользователь щелкает значок, расположенный внутри этого конкретного элемента списка . Я делюсь ссылкой на код здесь - https://codepen.io/tsiruot/pen/yLOVyGg

   var list = document.getElementById('task-list');
var btnInput = document.getElementById('submit-btn');

btnInput.addEventListener('click', addlist);

var inputBox = document.getElementById('todo-task');

inputBox.addEventListener('keyup', function(e){
    var keyCode = e.keyCode;
    if(keyCode === 13)
    {
        addlist();
    }
})

function addlist(){
    var newElement = document.createElement('li');
    var inputValue = document.getElementById('todo-task').value;
    if(inputValue !== null && inputValue !==undefined && inputValue !=='')
    {
    newElement.appendChild(document.createTextNode(inputValue));
    list.appendChild(newElement);
    document.getElementById('todo-task').value = '';
    }
    else{
        alert('Please Add valid input value');
    }
}

function createNewNode(){
    var newElement = document.createElement('li');
    var inputValue = document.getElementById('todo-task').value;
    if(inputValue !== null && inputValue !==undefined && inputValue !=='')
    {
    newElement.appendChild(document.createTextNode(inputValue));
    return newElement;
    }
    else{
        alert('Please Add valid input value');
    }
}

var btnUpdate = document.getElementById('btn-update');

btnUpdate.addEventListener('click', function(){
    var firstElement = list.firstElementChild;
    var updatedNode = createNewNode();
    list.replaceChild(updatedNode, firstElement);
    document.getElementById('todo-task').value = '';
});

var btnRemove = document.getElementById('btn-remove');

btnRemove.addEventListener('click', function(){
    var firstElement = list.firstElementChild;
    list.removeChild(firstElement);
});
0
Tsiruot 20 Авг 2020 в 19:23

2 ответа

Лучший ответ

Общие сведения:

  • Я предлагаю использовать let и const вместо var в качестве лучшей практики: Различия let, const, var.
  • Всегда проверяйте количество элементов в списке, чтобы убедиться, что вы не попытаетесь удалить или заменить несуществующие элементы, я добавил такие элементы управления в приведенный ниже код.

Теперь перейдем к вашим просьбам. После этого краткого объяснения вы найдете рабочий проверенный код ниже:

  • Чтобы добавить значок корзины к каждому новому элементу, достаточно создать элемент <i>, добавить правильный класс и добавить его к новому элементу, который добавляется в список.
  • Чтобы значок корзины удалял элемент, просто добавьте к нему прослушиватель событий.

Я также добавил фрагменты кода, чтобы новые элементы, добавленные в список, получали уникальный идентификатор. Не знаю, может ли это быть вам полезно, но если нет, просто удалите его.
Теперь достаточно пояснений, перейдем к коду:

const list = document.getElementById('task-list');
const btnInput = document.getElementById('submit-btn');
//Variable to keep track of all the elements ever created.
let elementCounter = list.children.length;

btnInput.addEventListener('click', addlist);

const inputBox = document.getElementById('todo-task');

inputBox.addEventListener('keyup', function(e) {
    const keyCode = e.keyCode;
    if(keyCode === 13)
    {
        addlist();
    }
});

function addlist()
{
    const inputValue = document.getElementById('todo-task').value;
    if(inputValue !== null && inputValue !== undefined && inputValue !== '')
    {
        //Moved the creation of the new element here so that it's not created when not necessary.
        const newElement = document.createElement('li');
        //Element for the trash icon.
        const trashIcon = document.createElement('i');
        //Add class to the element.
        trashIcon.className = 'fas fa-trash';
        //Add even listener so that when the element is clicked newElement is removed.
        trashIcon.addEventListener('click', function() {
            list.removeChild(newElement);
        });
        //Add unique ID to the new element.
        newElement.id = 'item' + ++elementCounter;
        newElement.appendChild(document.createTextNode(inputValue));
        newElement.appendChild(trashIcon);
        list.appendChild(newElement);
        document.getElementById('todo-task').value = '';
    }
    else
    {
        alert('Please Add valid input value');
    }
}

function createNewNode()
{
    const inputValue = document.getElementById('todo-task').value;
    if(inputValue !== null && inputValue !== undefined && inputValue !== '')
    {
        //Moved the creation of the new element here so that it's not created when not necessary.
        const newElement = document.createElement('li');
        //Element for the trash icon.
        const trashIcon = document.createElement('i');
        //Add class to the element.
        trashIcon.className = 'fas fa-trash';
        //Add even listener so that when the element is clicked newElement is removed.
        trashIcon.addEventListener('click', function() {
            list.removeChild(newElement);
        });
        //Add unique ID to the new element.
        newElement.id = 'item' + ++elementCounter;
        newElement.appendChild(document.createTextNode(inputValue));
        newElement.appendChild(trashIcon);
        return newElement;
    }
    else
    {
        alert('Please Add valid input value');
        //If the new element was not created, return false.
        return false;
    }
}

const btnUpdate = document.getElementById('btn-update');

btnUpdate.addEventListener('click', function() {
    //Do the following code only if there's at least one element in the list.
    if(list.children.length > 0)
    {
        const firstElement = list.firstElementChild;
        const updatedNode = createNewNode();
        //Do the following code only if the new node was created.
        if(updatedNode != false)
        {
            list.replaceChild(updatedNode, firstElement);
            document.getElementById('todo-task').value = '';
        }
    }
    else
    {
        alert('List is empty');
    }
});

const btnRemove = document.getElementById('btn-remove');

btnRemove.addEventListener('click', function() {
    //Do the following code only if there's at least one element in the list.
    if(list.children.length > 0)
    {
        const firstElement = list.firstElementChild;
        list.removeChild(firstElement);
    }
    else
    {
        alert('List is empty');
    }
});

Также в HTML-файле я удалил уже существующие элементы в списке, чтобы все элементы динамически создавались с помощью приведенного выше кода javascript, а прослушиватели событий присутствовали и работали правильно.
Надеюсь, это то, что вы искали, не стесняйтесь задавать любой вопрос.

0
Riccardo Chimisso 20 Авг 2020 в 19:03

Вот Codepen с вашим решением.

Вы создаете новый элемент значка и добавляете его в свой список, добавляя при необходимости имена классов и идентификаторы:

function addlist(){
var newElement = document.createElement('li');
var newIcon = document.createElement('i');

var inputValue = document.getElementById('todo-task').value;
if(inputValue !== null && inputValue !==undefined && inputValue !=='')
{
newIcon.classList.add("fas");
newIcon.classList.add("fa-trash");
newIcon.setAttribute("id","icon3");
newElement.appendChild(document.createTextNode(inputValue));
list.appendChild(newElement);
newElement.appendChild(newIcon);
newElement.setAttribute("id","item3");
delButton3 = document.getElementById('icon3');
document.getElementById('todo-task').value = '';
}
else{
    alert('Please Add valid input value');
}

}

Затем создайте свой узел:

function createNewNode(){
var newElement = document.createElement('li');
var newIcon = document.createElement('i');
newElement.appendChild(document.createTextNode(inputValue));

var inputValue = document.getElementById('todo-task').value;
if(inputValue !== null && inputValue !==undefined && inputValue !=='')
{
    
newElement.appendChild(document.createTextNode(inputValue));
newIcon.classList.add('fas fa-trash');
list.appendChild(newIcon);
return newElement;

}
else{
    alert('Please Add valid input value');
}
var delButton3 = document.getElementById('icon3'); 

}

Ваша функция удаления должна применяться, когда элемент с таким именем класса найден, поскольку при загрузке страницы этот элемент еще не существует:

document.addEventListener('click',function(e){
if(e.target && e.target.id== 'icon3'){
      console.log('clicked')
      var item3 = document.getElementById('item3');
      item3.parentNode.removeChild(item3);
 }

});

Просто проверьте код для уточнения :)

0
Jake Black 20 Авг 2020 в 19:06