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>

如何通过单击按钮删除选定的用户输入？

1 个答案: