Javascript 使用按钮移除UL内部的DINAMICALL LI_Javascript_Html_Dynamic_Html Lists

Javascript 使用按钮移除UL内部的DINAMICALL LI

javascript html dynamic

Javascript 使用按钮移除UL内部的DINAMICALL LI,javascript,html,dynamic,html-lists,Javascript,Html,Dynamic,Html Lists,我有一个文本区域，我正在其中写入文本，然后按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.mi

我有一个文本区域，我正在其中写入文本，然后按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>

我正在单击“删除”按钮，但什么也没发生。

您可以这样做：

函数addItem（）{
var ul=document.getElementById（“动态列表”）；
var候选者=document.getElementById（“文本框”）；
var li=document.createElement（“li”）；
li.setAttribute（“id”、“li”）；
var removeBtn=document.createElement（“按钮”）；
removeBtn.innerHTML=“删除”；
removeBtn.setAttribute（“id”，“remove”）；
//removeBtn.onClick=function（）{this.parentNode.removeChild（this）；}
li.appendChild（document.createTextNode（candidate.value））；
ul.儿童（li）；
li.附加儿童（移除BTN）；
document.getElementById（'textBox'）。value=“”；
}
函数删除（）{
this.parentNode.removeChild（this）；
}
var input=document.getElementById（“文本框”）；
input.addEventListener（“键控”，函数（事件）{
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）{
如果（evt.type==“按键”）{
粘贴输入（此“\n”）；
}
evt.preventDefault（）；
}
});
$（文档）.ready（函数（）{
$（“正文”）。在（“单击”、“删除”功能上（）{
$（this.parent（）.remove（）；
});
});

列表
a组{
保证金：0；
位置：绝对位置；
最高：50%；
左：40%；
保证金权利：-50%；
}
b组{
保证金：0；
位置：绝对位置；
最高：50%；
左：55%；
保证金权利：-50%；
}
文本区域#文本框{
宽度：100%；
显示：块；
最大宽度：100%；
线高：1.5；
填充：15px 15px 30px；
边界半径：3px；
边框：1px实心#F7E98D；
过渡：盒影0.5s缓；
盒影：0.4px 6px rgba（0,0,0,0.1）；
背景：线性梯度（#F9EFAF，#F7E98D）；
背景：-o-线性梯度（#F9EFAF，#F7E98D）；
背景：-ms线性梯度（#F9EFAF，#F7E98D）；
背景：-莫兹线性梯度（#F9EFAF，#F7E98D）；
背景：-webkit线性梯度（#F9EFAF，#F7E98D）；
}
李：悬停{
背景颜色：浅蓝色；
}

发送
下面是您需要在代码中进行的更改
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>

通过使用removeBtn.onclick=remove

，您将只在按钮上注册单击事件，而不是整个文档。

单击文本也将删除列表项。它在整个文档对象上注册点击事件，点击任何

元素都会触发该事件。如果我只有“删除”按钮，该代码可以工作。我还想向LI添加一个编辑按钮，但当我单击编辑按钮时，它也会删除LI。（我希望当我单击“编辑”将当前LI文本复制到文本区域，然后能够更改任何我想要的内容，当我按“编辑”将LI更改为当前编辑的文本时）这是一个简单的修复方法，您只需向按钮添加id并修改单击处理程序上的选择器即可。我编辑了我的答案。

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

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

});