Question

我有一个文本区域，我在其中写入文本并购买按回车，文本正被添加到UL。我试图使用动态创建的按钮从UL中删除特定的动态创建的LI，但该功能不起作用

这是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();
    }

});

我点击删除按钮但没有任何反应。

Answer 1

你可以这样做：

＆＃13;

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();
        });
    });

＆＃13;

<!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>

＆＃13;

Answer 2

以下是您需要在代码中完成的更改的的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 ，您只需在按钮上注册点击事件，而不是整个文档。

使用按钮在UL内删除dinamically LI

2 个答案: