10, Set up, with a small twist - can't figure out how to remove more than one input generated element


#1

https://www.codecademy.com/courses/web-beginner-en-v6phg/2/1?curriculum_id=50a3fad8c7a770b5fd0007a1

No error messages. My code runs but one line has no effect.
Basically, i want the remove button to be seperated from the rest of the input, so that the input only disappear if the remove button is clicked - and not when the input itself is clicked.

To achieve this, i’m looking to get both the related input button and the input value to be removed at the same time when the user click on the button.

It almost works. However, the input itself doesn’t get removed. The line that doesn’t work is

$(".list").closest($("input").val()).remove();

It doesn’t remove the input, so right now clicking on the remove button of an input only removes the button itself. How can i write this line to remove the input generated along the button when the user click on “add”, without removing any other inputs or buttons ?

The code:

**HTML**

<!DOCTYPE html>
<html>
    <head>
    	<title>To Do</title>
        <link rel="stylesheet" type="text/css" href="stylesheet.css"/>
        <script type="text/javascript" src="script.js"></script>
	</head>
	<body>
		<h2>To Do</h2>
		<form name="checkListForm">
			<input type="text" name="checkListItem"/>
		</form>
		<div id="button">Add!</div>
		<br/>
		<div class="list"></div>
	</body>
</html>

**CSS**

h2 {
    font-family:arial;
}

form {
    display: inline-block;
}

#button{
    display: inline-block;
    height:20px;
	width:70px;
	background-color:#cc0000;
	font-family:arial;
	font-weight:bold;
	color:#ffffff;
	border-radius: 5px;
	text-align:center;
	margin-top:2px;
}

.list {
	font-family:garamond;
	color:#cc0000;
}

**Jquery**

$(document).ready(function () {
var blabla = $("input").val();
$("#button").click(function () {
$(".list").append($("input").val(),"<span class = croix>   (x) <br /></span>");
});
$(document).on('click', '.croix', function () {
    $(this).closest('span').remove();
    $(".list").closest($("input").val()).remove();
});
});




#2

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.