Question

我正在制作购物清单应用。我可以将项目添加到列表中，一旦它们出现，我就会将其设置为每个项目旁边都会显示一个按钮。该按钮位于此处，以便您可以点击该按钮，并在准备好后从列表中删除您的项目。

这里的问题是，在添加几个项目后，按钮会自行增加。基本上，代替一个项目只有一个按钮，每个项目有多个按钮随着列表的增加。我只需要每个项目一个按钮。你能看一下我的代码和帮助吗？非常感谢！

＆＃13;

$(document).ready(function() {

  $('#removebox').hide();

  //When you click send it sends the item to the list
  $('#send').click(function() {
    var userMessage = $('.text-box').val();
    $('.text-box').val('');

    //If theres nothing in the text-box and send is clicked an alert pops up
    if (!userMessage) {
      alert("Please add some items to the list!")
    } else {
      //This appends the item typed into the text-box to the list
      $('.container').append('<li>' + userMessage + '</li>');
      addBox();
    }
  });


  //This adds the remove button next to each item in the list      
  function addBox() {
    $('.container li').append($('#removebox'));
    $('#removebox').show();

  };
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="title" width="100%">
  <p> Shopping List</p>
</div>

<div class="container">
  <input class="text-box" placeholder="Please enter an item">
  <button id="send">submit</button>
  <button id="removebox">X</button>
</div>

＆＃13;

Answer 1

为什么每次都复制按钮？他有自己的身份，所以你不能复制他。

@tyler mackenzie正确指出的真正问题是，你的'.container li'选择器会找到所有点而不仅仅是最后一个点。

所以这里有一些解决这些问题的代码：

＆＃13;

$(document).ready(function() {
  //When you click send it sends the item to the list
  $('#send').click(function() {
    var userMessage = $('.text-box').val();
    $('.text-box').val('');

    //If theres nothing in the text-box and send is clicked an alert pops up
    if (!userMessage) {
      alert("Please add some items to the list!")
    } else {
      //This appends the item typed into the text-box to the list
      var remBtn = $('<button class="removebox">');  // this creates a new button element
      remBtn.text('X');
      var li = $('<li>');
      li.text(userMessage);
      li.append(remBtn);
      $('.container').append(li);
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="title" width="100%">
  <p> Shopping List</p>
</div>

<div class="container">
  <input class="text-box" placeholder="Please enter an item">
  <button id="send">submit</button>
</div>

＆＃13;

Answer 2

https://jsfiddle.net/62afjy7q/

基本上，我改变了隐藏/显示按钮的方式（现在用css隐藏），并在附加到每个按钮时克隆它。我修改了一些html，将第一组内容放在自己的div中

<div class="container">
  <div class="input-container">
    <input class="text-box" placeholder="Please enter an item">
    <button id="send">submit</button>
    <button id="removebox">X</button>
  </div>

</div>

--- css ---
.input-container #removebox {
  display: none
}

--- js ---
function addBox(){
    $('.container li:last-child').append($('#removebox').clone());
     //$('#removebox').show();

};

每个项目有多个按钮，而不是我的购物清单应用中的每个项目只有一个按钮？

2 个答案: