CODEWITHSUNDEEP
javascriptjqueryhtml
MissKnacki
MissKnacki

Reputation: 279

How to Add element in a list with JQuery

I just started using jQuery and I wanted to add li element in my HTML when I click on a button. Then I want to add a button that clear my list when it's clicked. This part works fine but when I click on clear button it disabled the other buttons.

My html :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <link rel="shortcut icon" href="res/MPS.png" type="image/x-icon"/>
    <link rel="icon" href="res/MPS.png" type="image/x-icon"/>
    <title>Historique</title>
  </head>
  <body>
    <div class="filtres">
      <input id="filtre1" type="button" value="filter 1" onclick="addFiltre1()">
      <input id="filtre2" type="button" value="filter 2" onclick="addFiltre2()">
      <input id="filtre3" type="button" value="filter 3" onclick="addFiltre3()">
      <input id="filtre4" type="button" value="filter 4" onclick="addFiltre4()">
      <input id="filtre5" type="button" value="filter 5" onclick="addFiltre5()">

      <input id="clear" type="button" value="Clear filters" onclick="removeFilters()">
    </div>

    <div id="liste">
      <ul>
      </ul>
    </div>
  </body>
</html>

My JS :

function addFiltre1() {
    $("<ul>");
    $("<li>Filter 1</li>").appendTo("ul");
}

function addFiltre2() {
    $("<ul>");
    $("<li>Filter 2</li>").appendTo("ul");
}

function addFiltre3() {
    $("<ul>");
    $("<li>Filter 3</li>").appendTo("ul");
}

function addFiltre4() {
    $("<ul>");
    $("<li>Filter 4</li>").appendTo("ul");
}


function addFiltre5() {
    $("<ul>");
    $("<li>Filter 5</li>").appendTo("ul");
}

function removeFiltres() {
    $("#liste").html('');
}

I don't understand where is the problem and how to fix it.

Upvotes: 0

Views: 75

Answers (2)

Shakil Hossain
Shakil Hossain

Reputation: 1743

you have to clear #liste ul not #liste. when you are making empty your #liste it's removing your appendTo target <ul></ul> tag. After that action Again you are trying to appendTo in <ul></ul> Tag but its already removed. so you have to clean inner #liste ul

your declaration removeFilters() and you button function name will be same Because your button is calling that function that is declared with same name.

you can use direct empty() method for clear inner HTML at your div instance of html('') method. 

function addFiltre1() {
    $("<ul>");
    $("<li>Filter 1</li>").appendTo("ul");
}

function addFiltre2() {
    $("<ul>");
    $("<li>Filter 2</li>").appendTo("ul");
}

function addFiltre3() {
    $("<ul>");
    $("<li>Filter 3</li>").appendTo("ul");
}

function addFiltre4() {
    $("<ul>");
    $("<li>Filter 4</li>").appendTo("ul");
}


function addFiltre5() {
    $("<ul>");
    $("<li>Filter 5</li>").appendTo("ul");
}

function removeFiltres() {
    $("#liste ul").empty('');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filtres">
      <input id="filtre1" type="button" value="filter 1" onclick="addFiltre1()">
      <input id="filtre2" type="button" value="filter 2" onclick="addFiltre2()">
      <input id="filtre3" type="button" value="filter 3" onclick="addFiltre3()">
      <input id="filtre4" type="button" value="filter 4" onclick="addFiltre4()">
      <input id="filtre5" type="button" value="filter 5" onclick="addFiltre5()">

      <input id="clear" type="button" value="Clear filters" onclick="removeFiltres()">
    </div>

    <div id="liste">
      <ul>
      </ul>
    </div>

Upvotes: 4

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27041

There are 2 problems, first you have a type error, you are using removeFiltres() and removeFilters().

Second add ul to $("#liste").html(''); to it looks like $("#liste ul").html(''); then it works.

You can make your code a bit more clean using:

$('[id^=filtre]').click(function(){
  $("<li>Filter"+$(this).data('id')+"</li>").appendTo("ul");
});

Demo

function addFiltre1() {
  $("<ul>");
  $("<li>Filter 1</li>").appendTo("ul");
}

function addFiltre2() {
  $("<ul>");
  $("<li>Filter 2</li>").appendTo("ul");
}

function addFiltre3() {
  $("<ul>");
  $("<li>Filter 3</li>").appendTo("ul");
}

function addFiltre4() {
  $("<ul>");
  $("<li>Filter 4</li>").appendTo("ul");
}


function addFiltre5() {
  $("<ul>");
  $("<li>Filter 5</li>").appendTo("ul");
}

function removeFiltres() {
  $("#liste ul").html('');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filtres">
  <input id="filtre1" type="button" value="filter 1" onclick="addFiltre1()">
  <input id="filtre2" type="button" value="filter 2" onclick="addFiltre2()">
  <input id="filtre3" type="button" value="filter 3" onclick="addFiltre3()">
  <input id="filtre4" type="button" value="filter 4" onclick="addFiltre4()">
  <input id="filtre5" type="button" value="filter 5" onclick="addFiltre5()">

  <input id="clear" type="button" value="Clear filters" onclick="removeFiltres()">
</div>

<div id="liste">
  <ul>
  </ul>
</div>

Upvotes: 1

Related Questions