Удаление динамически LI внутри UL с помощью кнопки - PullRequest
Новая
       16

Удаление динамически LI внутри UL с помощью кнопки

0 голосов
/ 05 июня 2018

У меня есть текстовая область, в которой я пишу текст и покупаю, нажимая ввод, текст добавляется в UL.я пытаюсь удалить определенный динамически созданный LI из UL, используя динамически созданную кнопку, но функция не работает

это HTML-код: 

<!DOCTYPE html>
<html>
<head>
    <title>list</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<style>
    div.a {
        margin: 0;
        position: absolute;
        top: 50%;
        left: 40%;
        margin-right: -50%;

    }
    div.b {
        margin: 0;
        position: absolute;
        top: 50%;
        left: 55%;
        margin-right: -50%;
    }
    textarea#textBox {
        width: 100%;
        display: block;
        max-width: 100%;
        line-height: 1.5;
        padding: 15px 15px 30px;
        border-radius: 3px;
        border: 1px solid #F7E98D;

        transition: box-shadow 0.5s ease;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        background: linear-gradient(#F9EFAF, #F7E98D);
        background: -o-linear-gradient(#F9EFAF, #F7E98D);
        background: -ms-linear-gradient(#F9EFAF, #F7E98D);
        background: -moz-linear-gradient(#F9EFAF, #F7E98D);
        background: -webkit-linear-gradient(#F9EFAF, #F7E98D);
    }
    li:hover {
        background-color: lightblue;

    }

</style>
<div class="a">
    <textarea id="textBox"></textarea>
    <ul id="dynamic-list"></ul>
</div>
<div class="b">
    <button type="button" onclick=addItem()>Send</button>
</div>

<script
    src="scriptt.js">
    $(document).ready(function () {
        $("li").click(function () {
            $("li").remove();
        });
    });
</script>
</body>
</html>

и это JavaScriptкод: 

function addItem() {
    var ul = document.getElementById("dynamic-list");
    var candidate = document.getElementById("textBox");
    var li = document.createElement("li");
    li.setAttribute("id", "li");
    var removeBtn = document.createElement("button");
    removeBtn.innerHTML = "remove";
    removeBtn.onClick = function () { this.parentNode.removeChild(this); }
    li.appendChild(document.createTextNode(candidate.value));
    ul.appendChild(li);
    li.appendChild(removeBtn);
    document.getElementById('textBox').value = "";
}


function remove() {
    this.parentNode.removeChild(this);
}
var input = document.getElementById("textBox");
input.addEventListener("keyup", function (event) {
    event.preventDefault();
    if (event.keyCode == 13 && !event.shiftKey && document.getElementById('textBox').value != "") {
        addItem();
        input.text = "";
        if (event.preventDefault) {
            event.preventDefault();
        }
    }
    if (event.keyCode == 13 && event.shiftKey) {
        if (evt.type == "keypress") {
            pasteIntoInput(this, "\n");
        }
        evt.preventDefault();
    }

});

Я нажимаю кнопку удаления, но ничего не происходит.

Ответы [ 2 ]

0 голосов
/ 05 июня 2018

Ниже приведены изменения, которые необходимо внести в ваш код. Index.html 

<!DOCTYPE html>
<html>
<head>
    <title>list</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<style>
    div.a {
        margin: 0;
        position: absolute;
        top: 50%;
        left: 40%;
        margin-right: -50%;

    }
    div.b {
        margin: 0;
        position: absolute;
        top: 50%;
        left: 55%;
        margin-right: -50%;
    }
    textarea#textBox {
        width: 100%;
        display: block;
        max-width: 100%;
        line-height: 1.5;
        padding: 15px 15px 30px;
        border-radius: 3px;
        border: 1px solid #F7E98D;

        transition: box-shadow 0.5s ease;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        background: linear-gradient(#F9EFAF, #F7E98D);
        background: -o-linear-gradient(#F9EFAF, #F7E98D);
        background: -ms-linear-gradient(#F9EFAF, #F7E98D);
        background: -moz-linear-gradient(#F9EFAF, #F7E98D);
        background: -webkit-linear-gradient(#F9EFAF, #F7E98D);
    }
    li:hover {
        background-color: lightblue;

    }

</style>
<div class="a">
    <textarea id="textBox"></textarea>
    <ul id="dynamic-list"></ul>
</div>
<div class="b">
    <button type="button" onclick=addItem()>Send</button>
</div>

<script src="scriptt.js"></script>
<script>
</script>
</body>
</html>

Scriptt.js 

function addItem() {
    var ul = document.getElementById("dynamic-list");
    var candidate = document.getElementById("textBox");
    var li = document.createElement("li");
    li.setAttribute("id", "li");
    var removeBtn = document.createElement("button");
    removeBtn.innerHTML = "remove";
    removeBtn.onclick = remove;
    li.appendChild(document.createTextNode(candidate.value));
    ul.appendChild(li);
    li.appendChild(removeBtn);
    document.getElementById('textBox').value = "";
}


function remove() {
    this.parentNode.parentNode.remove(this.parentNode);
}

var input = document.getElementById("textBox");
input.addEventListener("keyup", function (event) {
    event.preventDefault();
    if (event.keyCode == 13 && !event.shiftKey && document.getElementById('textBox').value != "") {
        addItem();
        input.text = "";
        if (event.preventDefault) {
            event.preventDefault();
        }
    }
    if (event.keyCode == 13 && event.shiftKey) {
        if (evt.type == "keypress") {
            pasteIntoInput(this, "\n");
        }
        evt.preventDefault();
    }

});

Используя removeBtn.onclick = remove, вы регистрируете событие нажатия только на кнопку, а не на весь документ.

0 голосов
/ 05 июня 2018

Вы можете сделать это так: 

function addItem() {
    var ul = document.getElementById("dynamic-list");
    var candidate = document.getElementById("textBox");
    var li = document.createElement("li");
    li.setAttribute("id", "li");
    var removeBtn = document.createElement("button");
    removeBtn.innerHTML = "remove";
    removeBtn.setAttribute("id", "remove");
    //removeBtn.onClick = function () { this.parentNode.removeChild(this); }
    li.appendChild(document.createTextNode(candidate.value));
    ul.appendChild(li);
    li.appendChild(removeBtn);
    document.getElementById('textBox').value = "";
}


function remove() {
    this.parentNode.removeChild(this);
}
var input = document.getElementById("textBox");
input.addEventListener("keyup", function (event) {
    event.preventDefault();
    if (event.keyCode == 13 && !event.shiftKey && document.getElementById('textBox').value != "") {
        addItem();
        input.text = "";
        if (event.preventDefault) {
            event.preventDefault();
        }
    }
    if (event.keyCode == 13 && event.shiftKey) {
        if (evt.type == "keypress") {
            pasteIntoInput(this, "\n");
        }
        evt.preventDefault();
    }

});

$(document).ready(function () {
        $("body").on("click", "li #remove", function () {
            $(this).parent().remove();
        });
    });
<!DOCTYPE html>
<html>
<head>
    <title>list</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<style>
    div.a {
        margin: 0;
        position: absolute;
        top: 50%;
        left: 40%;
        margin-right: -50%;

    }
    div.b {
        margin: 0;
        position: absolute;
        top: 50%;
        left: 55%;
        margin-right: -50%;
    }
    textarea#textBox {
        width: 100%;
        display: block;
        max-width: 100%;
        line-height: 1.5;
        padding: 15px 15px 30px;
        border-radius: 3px;
        border: 1px solid #F7E98D;

        transition: box-shadow 0.5s ease;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        background: linear-gradient(#F9EFAF, #F7E98D);
        background: -o-linear-gradient(#F9EFAF, #F7E98D);
        background: -ms-linear-gradient(#F9EFAF, #F7E98D);
        background: -moz-linear-gradient(#F9EFAF, #F7E98D);
        background: -webkit-linear-gradient(#F9EFAF, #F7E98D);
    }
    li:hover {
        background-color: lightblue;

    }

</style>
<div class="a">
    <textarea id="textBox"></textarea>
    <ul id="dynamic-list"></ul>
</div>
<div class="b">
    <button type="button" onclick=addItem()>Send</button>
</div>


</body>
</html>
...