Question

好的......这几天一直困扰着我。

我试图做的是开发一个页面，动态地添加用户在文本栏中输入的内容，并且在文本附近必须有＆＃34;删除＆＃34;按钮谁应删除该行。但是我只能让按钮移除按钮本身，而不是行。

这是添加代码：

$("#Add").click(function() {
    var $li = $("#test").val() + '<li>   <button class="Remove" type="button">Remove</button> </li>' ;
    $("ul").append($li);

        });

删除代码：

$('ul').on('click', '.Remove', function() {
    $(this).closest('li').remove();

});

身体：

<ul></ul>
<button id="Add" type="button">Add</button>
<input type="text" id="test" value=""> <br>

我想最简单的解决方法是将用户输入添加到li / li体内，但我不知道该怎么做。

Answer 1

你可以试试这个

＆＃13;

$("#Add").click(function() {
  var $li = '<li> ' + $("#test").val() + '  <button class="Remove" type="button">Remove</button> </li>';
  $("ul").append($li);

});

＆＃13;

Answer 2

在li之前追加值生成无效的html元素.JQuery代码正常工作，因为它只删除<li>...</li>而不删除案例中的前置文本：User input <li>...</li>。

文本应在li内（innertext）。

更改

var $li = $("#test").val() + '<li>   <button class="Remove" type="button">Remove</button> </li>' ;

到

var $li = '<li><button class="Remove" type="button">Remove</button>'+ $("#test").val() +'</li>';

如何使用删除按钮添加一行？

2 个答案: