Home > Others

jquery Add Delete HTML tag instance detailed

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Yesterday in writing jQuery when I met a small problem entangled me for a long time, and later in the direction of foxling to know is so.

The problem is this drop, there is a list of UL, after an event response to the UL list inside the LI content to be removed by line, so the following HTML code:

The code is as follows Copy Code

<ul id= "Test" >
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<a href= "#" id= "del" > Delete </a>

And the following JavaScript code:

The code is as follows Copy Code
$ (' #del '). Click (function () {
var list = $ (' #test ');
var len = list.find (' li '). length;

for (var i = 0; i < len; i++) {
List.find (' Li:eq (' + i + ') '). Remove ();
}
});

When I finished writing, I thought the logic was reasonable. Should be no problem, first calculated the UL tag inside how many Li, and then use for the loop to each of the contents of Li removed, but the code when the implementation of the problem came out, it did not remove all the contents of the inside, but there are some LI Left on the page.

The code is as follows Copy Code

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" >
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<title>insert title here</title>
<script type= "Text/javascript" src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" ></ Script>
<script>
$ (function () {
$ (' #del '). Click (function () {
var list = $ (' #test ');
var len = list.find (' li '). length;

for (var i = 0; i < len; i++) {
List.find (' Li:eq (' + i + ') '). Remove ();
}
});
});
</script>
<body>
<ul id= "Test" >
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<a href= "#" id= "del" > Delete </a>
</body>

Later, under the guidance of foxling, I learned the reason for this, when I equals 0, it is correct to delete the first Li tag (its index is 0), and when I equals 1, the index of the 2nd Li tag in the original list is deleted because the previous Li tag was removed from 1 becomes 0, so the LI tag is not removed, and at this point the 3rd Li tag in the original list is removed, and its index has become 1, so the loop ... This is why there are some things that have not been removed after the for loop has been executed.

The above JavaScript just changes a little bit of the place OK:

The code is as follows Copy Code

$ (' #del '). Click (function () {
var list = $ (' #test ');
var len = list.find (' li '). length;

for (var i = 0; i < len; i++) {
List.find (' li:eq (0) '). Remove ();//Because the index of the Li tag after each loop has changed to 0.
}
});


Cases

The code is as follows Copy Code

<div id= "Previewpics" >
<li id= "Fileid16" ><BR>
<input onclick= "window.open (THIS.SRC)" type= "button" src= "Uploads/201005/127311533698.gif" value= "big picture" >
<input onclick= "deleteimg (THIS.SRC)" type= "button" src= "" value= "Delete" >
</LI>
<li id= "Fileid17" ><BR>
<input onclick= "window.open (THIS.SRC)" type= "button" src= "Uploads/201005/127311534291.jpg" value= "big picture" >
<input onclick= "deleteimg (THIS.SRC)" type= "button" src= "" value= "Delete" >
</LI>
<li id= "Fileid18" ><BR>
<input onclick= "window.open (THIS.SRC)" type= "button" src= "Uploads/201005/127311536399.gif" value= "big picture" >
<input onclick= "deleteimg (THIS.SRC)" type= "button" src= "" value= "Delete" >
</LI>
</DIV>
Look again after the implementation of JS effect:

<div id= "Previewpics" >
<li id= "Fileid16" ><BR>
<input onclick= "window.open (THIS.SRC)" type= "button" src= "Uploads/201005/127311533698.gif" value= "big picture" >
<input onclick= "deleteimg (THIS.SRC)" type= "button" src= "" value= "Delete" >
</LI>
<li id= "Fileid17" ><BR>
<input onclick= "window.open (THIS.SRC)" type= "button" src= "Uploads/201005/127311534291.jpg" value= "big picture" >
<input onclick= "deleteimg (THIS.SRC)" type= "button" src= "" value= "Delete" >
</LI>
</DIV>

We'll know by contrast. Li's ID, fileid18, was deleted.
The main code is as follows:

The code is as follows Copy Code

$ (' li '). Remove (' #fileid ' +fid);


Example 2

The code is as follows Copy Code

<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title></title>

<script src= "Js/jquery.js" type= "Text/javascript" ></script>
<script type= "Text/javascript" >
$ (document). Ready (function () {
var spotmax = 3;
if ($ (' div.spot '). Size () >= Spotmax) {$ (obj). Hide ();
$ ("Input#add"). Click (function () {Addspot (this, spotmax);
});
});

function Addspot (obj, sm) {
$ (' div#spots '). Append (
' <div class= ' spot ' > ' +
' <input type= ' text ' name= ' spot_title '/> ' +
' <input type= ' text ' name= ' spot_addr '/> ' +
' <input type= ' text ' name= ' spot_url '/> ' +
' <input type= button ' class= ' Remove ' value= ' Delete '/></div> '
. Find ("Input.remove"). Click (function () {
$ (this). Parent (). remove ();
$ (' Input#add '). Show ();
});

if ($ (' div.spot '). Size () >= SM) {$ (obj). Hide ();
};
</script>

<body>
<form action= "test.php" method= "post" name= "asdf" id= "ASDF" >
<div id= "Spots" >
<input type= "button" id= "Add" name= "Add" value= "Add"/><br/>
</div>
<input type= "button" name= "Submit" value= "submit" id= "Send"/>
</form>
<script>
$ (' #send '). Click (function () {
Alert (' Demonstration only:submit disabled ');
});
</script>
</body>

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More