如何通過單擊按鈕刪除選定的用戶輸入？

Question

HTML

<input type="text" id="dodaj" name="additem">
<button id="add" onclick="newElement()">Dodaj</button>
<button id="remove" onclick=" removeLI()">Zbriši</button>

<ul id="kategorija">
    <li class="class">Vaje</li>
    <li class="class">Treningi</li>
    <li class="class">Projekt</li>
</ul>

JS

$(document).on('click', '.class', function(){ 

  $('.class').css("font-weight", 'normal');
  $('.class').css("text-decoration", 'none');


  $(this).css("font-weight", 'bold'); 
  $(this).css("text-decoration", 'underline');
});

$(document).ready(function(){
  $("#add").click(function(){
      var addItem= $("#dodaj").val();
      if(addItem.length > 0){
      $("ul").append('<li class="class">'+ addItem + '</li>');
      $("#dodaj").val("");
  }
  });
});

在我的一生中，我無法弄清楚如何使用刪除按鈕（id=Remove）刪除選定的 LI 項目。 嘗試使用此關鍵字，但它只刪除了刪除按鈕。

Answer 1

除了針對<li>項目設置 CSS 之外，我建議您還設置另一個類用作標識符...然后您可以.remove()該項目。

我也對你的代碼做了一些小的改進......

 $(document).on('click', '.class', function(){ $('.class') .css({ "font-weight": 'normal', "text-decoration": 'none'}) .removeClass("selectedItem"); $(this) .css({"font-weight": 'bold', "text-decoration": 'underline'}) .addClass("selectedItem"); }); $(function(){ $("#add").click(function(){ var addItem = $("#dodaj").val(); if(addItem.length > 0) { $("ul").append($('<li class="class"></li>)').text(addItem)); $("#dodaj").val(""); } }); $("#remove").click(function() { $(".selectedItem").remove(); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" id = "dodaj" name="additem"> <button id="add">Dodaj</button> <button id="remove">Zbriši</button> <ul id="kategorija" > <li class="class">Vaje</li> <li class="class">Treningi</li> <li class="class">Projekt</li> </ul>