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.