Как удалить указанный c добавочный дочерний элемент с помощью удаления дочернего элемента?

Question

Используя Javascript Я запрограммировал простой контрольный список, в котором пользователь вводит свой список, а затем с каждым дочерним элементом появляется желтая кнопка. Нажав на это желтое поле, он удаляет указанный c div, но, к сожалению, он удаляет с порядок сверху вниз списка, но я хочу, чтобы он удалил свой собственный div, вот и все.

function Gen() {
    var c = document.getElementById("inp1").value;


    var div1 = document.createElement("div");
    div1.style.background = "#3498DB";
    div1.style.padding = "0.5rem";
    div1.setAttribute("class", "d-flex justify-content-between");
    div1.setAttribute("id", "div1");


    var p1 = document.createElement("p");
    p1.setAttribute("class", "font-y");
    p1.style.padding = "0rem 0rem 0rem 1rem";
    p1.style.margin = "0rem";

    var div2 = document.createElement("div");
    div2.setAttribute("id", "div2");
    div2.style.width = "1rem";
    div2.style.height = "1rem";
    div2.style.background = "yellow";
    div2.setAttribute("onclick", "Rem()");

    var li = document.createElement("li");
    li.style.margin = "1rem";
    li.setAttribute("id", "li");

    li.appendChild(div1);
    div1.appendChild(p1);
    div1.appendChild(div2);

    p1.innerHTML = c;

    document.getElementById("addr").appendChild(li);
    return false;
}

, нажав div2, он должен удалить div1, но его собственный div1 не тот, что над ним.

Answer 1

вместо

div2.setAttribute("onclick", "Rem()");

use:

div2.onclick = () => li.remove();

Здесь вместо переменной <li> используется переменная li.