How to delete selected user input by clicking on button?

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

For the life of me I can't figure out how to delete a selected LI item using the delete button (id=Remove). Tried using this keyword but it only deleted the delete button.

Does this answer your question? [Clear form fields with jQuery](https://stackoverflow.com/questions/6364289/clear-form-fields-with-jquery) — Masih Jahangiri, Dec 07 '19 at 13:59
@MasihJahangiri - 100% the wrong answer... it's got nothing to do with clearing form fields — freefaller, Dec 07 '19 at 14:00
Hello, please read [mcve] for a complete reproductible example, and add your removeLI() function, or any missing element to help community to answer your question. — el-teedee, Dec 07 '19 at 15:30

score 0 · Accepted Answer · answered Dec 07 '19 at 14:00

As well as setting the CSS against the <li> item, I would suggest you also set another class to use as an identifier... then you can just .remove() that item.

I've made a few minor improvements to your code as well...

$(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>

Wow, this is perfect. Thank you so mcuh – jankometka Dec 07 '19 at 18:06 — jankometka, Dec 07 '19 at 18:06

How to delete selected user input by clicking on button?

1 Answers1