Sope Isaac Orija
Reputation: 31
How do I hide a list item when a span element is clicked
What's the best way to hide a list item when a span inside the list item is clicked. I have included the code below. I'm trying to build a to-do list app and I'm stuck trying to write a script that removes/hide a task that has been done from the result list when the user clicks on the red "X" text.
var submitTask = $("#display-taskList");
var taskList = $("#taskList");
var submitTask = $("#submit-task");
var list = "<li>" + inputTask + "</li>"
var inputTask = $("#inputTask").val();
submitTask.click(function(event) {
event.preventDefault();
var inputTask = $("#inputTask").val();
var list = "<li>" + inputTask + "</li>"
if (inputTask === "") {
alert("Add a task")
}
else{
$("ol").append("<li>" + $("#inputTask").val() + "<span id='close'>" + "x" +"</span>" + "</li>" );
}
});
function doneTask(){
var x = $('#listResult');
$(x).click(function(e) {
if (e.target.tagName === 'SPAN'){
var y =$("#close");
var n = $(y).closest('li')
return n.style.visibility = "hidden";
};
});
}
doneTask();
html,body { height: 100%; margin: 0px; padding: 0px; }
body{
background: #F3904F; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #F3904F , #3B4371); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #F3904F , #3B4371); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
#center-block {
width:600px;
height: 100%;
padding:10px;
background: #F3904F; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #F3904F , #3B4371); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #F3904F , #3B4371); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
#inputTask{
width: 530px;
height: 44px;
margin-left: 30px;
font: 16px arial,sans-serif;
line-height: 34px;
height: 34px !important;
margin-top: 20px;
margin-bottom: 25px
;
}
input[type=text]{
background-color: #3B4371;
font-family: 'Ubuntu', sans-serif;
}
input[type=text]:focus {
background-color: #fff;
font-family: 'Ubuntu', sans-serif;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
border: 3px solid #555;:
}
#title{
color: #fff;
font-family: 'Ubuntu', sans-serif;
text-transform: capitalize;
}
hr{
width: 50;
}
button{
margin-top: 10px;
opacity: 0.5;
cursor: default;
font-family: arial,sans-serif;
font-size: 15px;
font-weight: bold;
margin: 5px 30px 10px 30px;
min-width: 54px;
height: 30px;
padding: 0 16px;
text-align: center;
}
ol > li {
color: #fff;
font-family: sans-serif;
font-size: 20px;
background-color: #A9A9A9;
margin-top: 5px;
padding-left: 5px;
}
li:hover{
background: #808080;
cursor: pointer;
}
.strike{
text-decoration: line-through;
}
#close{
color: red;
font-size: 30px;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<body>
<div class="container" id="center-block">
<div class="row">
<form>
<h1 class="text-center" id="title">Simple to-Do list</h1>
<hr width="50%">
<input type="text" id="inputTask" name="" placeholder="Title...">
<button id="submit-task">Hit Me!</button>
<!-- <button id="submit-task">Clear List</button> -->
<div id="display-taskList">
<h3 style="color: #fff; font-family: 'Kanit';"> Task to accomplish</h3>
<ol id="listResult"></ol>
</div>
</form>
</div>
</div>
</body>Upvotes: 1
Views: 287
Answers (4)
CWright
Reputation: 2098
You want to use Jquery css not style. It allows you to set properties like .css('key', 'value')
In this case I set .css('display', 'none')
var submitTask = $("#display-taskList");
var taskList = $("#taskList");
var submitTask = $("#submit-task");
var list = "<li>" + inputTask + "</li>"
var inputTask = $("#inputTask").val();
submitTask.click(function(event) {
event.preventDefault();
var inputTask = $("#inputTask").val();
var list = "<li>" + inputTask + "</li>"
if (inputTask === "") {
alert("Add a task")
}
else{
$("ol").append("<li>" + $("#inputTask").val() + "<span id='close'>" + "x" +"</span>" + "</li>" );
}
});
function doneTask(){
var x = $('#listResult');
$(x).click(function(e) {
if (e.target.tagName === 'SPAN'){
$(e.target).closest('li').css('display', 'none');
};
});
}
doneTask();
html,body { height: 100%; margin: 0px; padding: 0px; }
body{
background: #F3904F; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #F3904F , #3B4371); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #F3904F , #3B4371); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
#center-block {
width:600px;
height: 100%;
padding:10px;
background: #F3904F; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #F3904F , #3B4371); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #F3904F , #3B4371); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
#inputTask{
width: 530px;
height: 44px;
margin-left: 30px;
font: 16px arial,sans-serif;
line-height: 34px;
height: 34px !important;
margin-top: 20px;
margin-bottom: 25px
;
}
input[type=text]{
background-color: #3B4371;
font-family: 'Ubuntu', sans-serif;
}
input[type=text]:focus {
background-color: #fff;
font-family: 'Ubuntu', sans-serif;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
border: 3px solid #555;:
}
#title{
color: #fff;
font-family: 'Ubuntu', sans-serif;
text-transform: capitalize;
}
hr{
width: 50;
}
button{
margin-top: 10px;
opacity: 0.5;
cursor: default;
font-family: arial,sans-serif;
font-size: 15px;
font-weight: bold;
margin: 5px 30px 10px 30px;
min-width: 54px;
height: 30px;
padding: 0 16px;
text-align: center;
}
ol > li {
color: #fff;
font-family: sans-serif;
font-size: 20px;
background-color: #A9A9A9;
margin-top: 5px;
padding-left: 5px;
}
li:hover{
background: #808080;
cursor: pointer;
}
.strike{
text-decoration: line-through;
}
#close{
color: red;
font-size: 30px;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<body>
<div class="container" id="center-block">
<div class="row">
<form>
<h1 class="text-center" id="title">Simple to-Do list</h1>
<hr width="50%">
<input type="text" id="inputTask" name="" placeholder="Title...">
<button id="submit-task">Hit Me!</button>
<!-- <button id="submit-task">Clear List</button> -->
<div id="display-taskList">
<h3 style="color: #fff; font-family: 'Kanit';"> Task to accomplish</h3>
<ol id="listResult"></ol>
</div>
</form>
</div>
</div>
</body>Upvotes: 0
kind user
Reputation: 41893
A good approach to this problem would be binding a click event to every span element. If user clicks it, then the parent of the clicked span element is hidden.
Edit: If you click and add new todo, the input is cleared immediately.
var submitTask = $("#display-taskList");
var taskList = $("#taskList");
var submitTask = $("#submit-task");
var list = "<li>" + inputTask + "</li>"
var inputTask = $("#inputTask").val();
submitTask.click(function(event) {
event.preventDefault();
var inputTask = $("#inputTask").val();
var list = "<li>" + inputTask + "</li>"
if (inputTask === "") {
alert("Add a task")
} else {
$("ol").append("<li>" + $("#inputTask").val() + "<span id='close'>" + "x" + "</span>" + "</li>");
$('#inputTask').val(null);
}
$('#listResult').find('span').click(function() {
$(this).parent().hide();
});
});html,
body {
height: 100%;
margin: 0px;
padding: 0px;
}
body {
background: #F3904F;
/* fallback for old browsers */
background: -webkit-linear-gradient(to left, #F3904F, #3B4371);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #F3904F, #3B4371);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
#center-block {
width: 600px;
height: 100%;
padding: 10px;
background: #F3904F;
/* fallback for old browsers */
background: -webkit-linear-gradient(to left, #F3904F, #3B4371);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #F3904F, #3B4371);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
#inputTask {
width: 530px;
height: 44px;
margin-left: 30px;
font: 16px arial, sans-serif;
line-height: 34px;
height: 34px !important;
margin-top: 20px;
margin-bottom: 25px;
}
input[type=text] {
background-color: #3B4371;
font-family: 'Ubuntu', sans-serif;
}
input[type=text]:focus {
background-color: #fff;
font-family: 'Ubuntu', sans-serif;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
border: 3px solid #555;
:
}
#title {
color: #fff;
font-family: 'Ubuntu', sans-serif;
text-transform: capitalize;
}
hr {
width: 50;
}
button {
margin-top: 10px;
opacity: 0.5;
cursor: default;
font-family: arial, sans-serif;
font-size: 15px;
font-weight: bold;
margin: 5px 30px 10px 30px;
min-width: 54px;
height: 30px;
padding: 0 16px;
text-align: center;
}
ol>li {
color: #fff;
font-family: sans-serif;
font-size: 20px;
background-color: #A9A9A9;
margin-top: 5px;
padding-left: 5px;
}
li:hover {
background: #808080;
cursor: pointer;
}
.strike {
text-decoration: line-through;
}
#close {
color: red;
font-size: 30px;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<body>
<div class="container" id="center-block">
<div class="row">
<form>
<h1 class="text-center" id="title">Simple to-Do list</h1>
<hr width="50%">
<input type="text" id="inputTask" name="" placeholder="Title...">
<button id="submit-task">Hit Me!</button>
<!-- <button id="submit-task">Clear List</button> -->
<div id="display-taskList">
<h3 style="color: #fff; font-family: 'Kanit';"> Task to accomplish</h3>
<ol id="listResult"></ol>
</div>
</form>
</div>
</div>
</body>Upvotes: 1
Jorge Mejia
Reputation: 1163
You can try using a class in the span.
<span class="revovable">
$('.removable').on('click', function(){
$(this).hide();
//if you want to remove the element you can use this
$(this).remove();
})
Upvotes: 0
Hassan Niazi
Reputation: 330
You can use following approaches:
- Use jquery .hide() method. n.hide();
- Use jquery .css( "display", "none" ) method n.css( "display", "none" )
Upvotes: 0
Related Questions
- Hide list items when clicked anywhere else on the page
- hide element on click hide element
- Show and Hide span on click
- How to hide an element when I click the X mark in a child span
- Hide span with jquery
- How to make span class invisible untill it is triggerd?
- jQuery: Click to hide element
- How do I hide all but span elements within a list on button click?
- Hide span with jquery is not working
- hide span class when clicking on it