Добавить функцию EventListener к кнопке, которая возвращает родительский идентификатор

Question

Для каждого клиента в списке приложение добавляет следующие элементы li и ul.
btna имеет прослушиватель событий, который я хочу удалить полный li для этого клиента из ul.

function clientListEntry(client){
    //HTML Elements
    var clientEntry = document.createElement("LI");

    var diva = document.createElement("div");
    var divb = document.createElement("div");
    var divc = document.createElement("div");
    var divd = document.createElement("div");

    var labela = document.createElement("label");
    var inputa = document.createElement("checkbox");
    var spana = document.createElement("span");
    var btna = document.createElement("button");

    //LI - ID and Class
    clientEntry.id = client.userID;
    clientEntry.classList.add("item_portion");

    //Div classes and username
    diva.classList.add("c_leftsection");
    divb.classList.add("c_block");
    divc.classList.add("c_midsection");
    divc.innerText = client.name;
    divd.classList.add("c_rightsection");

    //Functionals classes
    labela.classList.add("switch");
    inputa.checked = true;
    spana.classList.add("slider");
    spana.classList.add("round");
    btna.classList.add("c_remove");
    btna.innerText = "-";
    btna.addEventListener("click", function() {
        document.removeChild(clientEntry);
    }, false);


    //Add to document
    document.getElementById("tabs_client_list").appendChild(clientEntry);
    clientEntry.appendChild(diva);
    diva.appendChild(divb);
    clientEntry.appendChild(divc);
    clientEntry.appendChild(divd);
    divd.appendChild(labela);
    labela.appendChild(inputa);
    inputa.appendChild(spana);
    divd.appendChild(btna);
}

Ul будет выглядеть примерно так:

            <li id="c2" class="item_portion">
                <div class="c_leftsection">
                    <div class="c_block"></div>
                </div>
                <div class="c_midsection">Jimmy</div>
                <div class="c_rightsection">
                    <label class="switch">
                        <input type="checkbox" checked>
                        <span class="slider round"></span>
                    </label>
                    <button class="c_remove" id="c_btn_remove">-</button>
                </div>
            </li>

В конце концов, я захочу удалить клиента из списка, а также другой элемент DOM, основанный на идентификаторе LI.
Мне кажется, что мне нужно передать идентификатор родительского элемента в функцию, но я не уверен, как его получить.

Answer 1

Я не уверен на 100%, правильно ли я понял ваш вопрос. Я прав, если я думаю, что вы хотите удалить родительский LI, если вы нажмете кнопку?

Если да, вы можете добавить идентификатор родительского LI к кнопке следующим образом:

<button class="c_remove" id="c_btn_remove" data-parent_id="add ID of LI here">-</button>

нажав кнопку, прослушиватель событий может получить доступ к данным-данным.

или вы можете удалить родительский элемент родителя для кнопки (пример jQuery):

$("#c_btn_remove").click(function(){
    $(this).parent().parent().remove();
});

возможно ближайший тоже подойдет

$("#c_btn_remove").click(function(){
    $(this).closest('li').remove();
});