Jquery dynamically adds and removes sample code for page node elements
- 2020-03-30 03:23:04
- OfStack
Usually we're going to run into a condition that's selected, and then we're going to add, and then we're going to add more, and then we're going to execute it.
Without further ado, go straight to the code!
Without further ado, go straight to the code!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Jquery Dynamically add and remove page nodes </title>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script><!-- reference jqurey The library files -->
<style>
.container{ width:1000px; margin:0 auto;}
.top{ height:25px; line-height:25px;}
.top select{ width:80px; height:22px; line-height:22px;}
.top input{ width:56px; height:22px;}
.add{ line-height:30px;}
li{ list-style:none;}
span{cursor:pointer;}
</style>
<script>
$(function(){//Execute after the page loads
$("input").click(function(){//Add operation
var getval=$("select").val();//Gets the currently selected select value
$("p").before('<li>'+getval+'<span>X</span></li>');//Adds the code to be generated before the p tag
});
});
$("span").live("click",function(){//Additional event handlers via the live() method apply to current and future elements of the selector (such as new elements created by the script)
$(this).parent().remove();//Removes the parent of the currently clicked element
});
</script>
</head>
<body>
<div class="container">
<div class="top">
<select>
<option> I am a number </option>
<option> I am a no. 2 </option>
<option> I am no. 3 </option>
<option> I am number four </option>
<option> I am a number five </option>
</select>
<input value=" add add " type="button"/>
</div>
<div class="add"><p></p></div>
</div>
</body>
</html>