文章/答案/技术大牛

发布

社区首页 >问答首页 >使用按钮移除UL中的LI

问使用按钮移除UL中的LI
EN

Stack Overflow用户

提问于 2018-06-05 17:56:14

回答 1查看 47关注 0票数 0

我有一个文本区域，我正在写文本在其中并购买按下enter，文本被添加到一个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();
    }

});

我点击删除按钮，但什么都没有发生。

javascript

html

dynamic

html-lists

回答 1

Stack Overflow用户

发布于 2018-06-05 18:14:31

下面是您需要在代码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

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/50706230

复制

相似问题

问使用按钮移除UL中的LI
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用按钮移除UL中的LIEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用按钮移除UL中的LI
EN