L oop массив до совпадения со значением элемента, по которому щелкнули

Question

Я пытаюсь провести l oop через массив, пока он не совпадет со значением объекта, по которому щелкнули.

Когда объект создан, поле ввода текста делится своим значением с объектом и массив. Я хотел бы иметь возможность l oop через массив, пока не будет совпадения, затем найти индекс, после чего передать значение индекса в переменную, которая будет использоваться. Оттуда удалите объект, который щелкают по веб-странице и массиву.

Дополнительные сведения - это поле ввода с кнопкой. Пользователь вводит строку информации в поле ввода и выбирает кнопку, чтобы добавить ее в список. Созданный объект - это div с входным значением в качестве абзаца с элементом span с X, который должен удалять объект при нажатии.

Здесь используется HTML код, используемый

<div id="outerDiv">
    <div id="taskList">

    </div>
</div>

Вот код для создания объекта.

var magicArray = [];

function makeOutline() {

    var textValue = document.getElementById("inputBox").value;


    if (textValue == "" || textValue == null){
        alert("Please enter a item you want to add to the to-do list");
    } else {


    var inputField = document.getElementById("taskList");
    var inputText = document.createTextNode(textValue);

    var mainHeading = document.createElement("p");
    mainHeading.setAttribute("class", "outlineBorder");

    var spanText = document.createTextNode("x");
    var spanBox = document.createElement("span");
    spanBox.setAttribute("class", "close");
    spanBox.setAttribute("onclick", "removeMe()");


    var outlineList = document.createElement("div");
    outlineList.setAttribute("value", textValue);


    spanBox.appendChild(spanText);
    mainHeading.appendChild(inputText);
    mainHeading.appendChild(spanBox);
    outlineList.appendChild(mainHeading);
    inputField.appendChild(outlineList);

    magicArray[magicArray.length] = textValue;

    document.getElementById("inputBox").value = "";

    }
}

Вот код для удаления объекта. Я могу установить его на номер c и работать каждый раз; однако, изо всех сил пытается найти динамическое c решение, так как может быть несколько объектов.

function removeMe() {

        var removeList = document.getElementById("taskList");
        removeList.removeChild(removeList.childNodes[1];

}

Вот скриншот структуры семейного дерева

Answer 1

Во-первых, вы можете использовать this, чтобы получить элемент. docs :

Когда вызывается обработчик события, ключевое слово this внутри обработчика устанавливается на элемент DOM, для которого зарегистрирован обработчик.

function removeMe() 
{
   // this refers to the item that invoked removeMe()
   var removeList = document.getElementById("taskList");
   removeList.removeChild(this.parentNode.parentNode);

}

Кроме того, вот как вы правильно добавляете прослушиватели событий

spanBox.addEventListener("click", removeMe);

Вот рабочий jsfiddle для вас