<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DIV页面元素增加删除例子</title>
<style type="text/css">
</style>
</head>
<body style="margin:0; padding:0; text-align:left">
<div style="width:300px; border:1px solid #AAA; position:absolute; left:50%; margin-left:-150px ">
<form action="#" method="get">
<div style="float:left; width:100px; text-align:right"> 名称：</div>
<div style="text-align:left">
<input type="text" name="title" />
</div>
<div style=" clear:left"/>
<div>
<div style="width:100px; text-align:right; float:left" >
<input type="button" value="+" onclick="addDiv()"/>
价格： </div>
<div id="divprice" style="text-align:left; margin: 0 0 0 100px">
<!--
<div>
<input type="text" name="price"/>
<input type="button" value="-"/>
</div>
!-->
</div>
</div>
<div style="text-align:center" >
<input type="submit" value="提交" />
</div>
</form>
</div>
<script type="text/javascript">
var index = 0;
function addDiv()
{
index++;
var div = document.createElement("div");
var inText = document.createElement("input");
inText.setAttribute("id","price_"+index);
inText.setAttribute("type","text");
inText.setAttribute("name","price");
div.appendChild(inText);
var btn = document.createElement("input");
btn.setAttribute("id","btn_"+index);
btn.setAttribute("type","button");
btn.setAttribute("value","-");
div.appendChild(btn);
btn.onclick = function (){
this.parentNode.parentNode.removeChild(this.parentNode);
};
document.getElementById("divprice").appendChild(div);
}
addDiv();
</script>
</body>
</html>
相关推荐
在JavaScript中，可以使用`removeChild()`或`parentNode.removeChild()`方法来删除指定的`div`元素。例如，假设我们有一个id为"to-delete"的`div`，删除它的代码如下： ```javascript var divToDelete = document....
本文将深入探讨如何使用 jQuery 实现添加、删除 `DIV` 元素以及创建切换特效。 首先，让我们理解 `DIV` 元素在网页布局中的角色。`DIV` 是一个无意义的块级元素，常用来组织页面结构，通过 CSS 样式进行布局控制。...
例如，假设我们有一个空的`<div>`元素，我们可以通过以下方式向其中添加一个`<p>`元素： ```javascript $("#myDiv").append("这是新增的段落</p>"); ``` 或者使用`prepend()`： ```javascript $("#myDiv").prepend...
在JavaScript中，`removeChild`方法是用于动态删除DOM元素的关键功能之一，尤其在处理动态内容更新和交互的场景中，如用户查找功能。在这个场景中，我们需要在用户输入搜索条件后，根据Ajax异步请求返回的数据，实时...
1. **创建遮罩层**：使用`document.createElement('div')`创建新的`div`元素，然后设置其样式属性，如`style.cssText`，或者通过`classList.add()`添加CSS类。 2. **插入到DOM**：使用`document.body.appendChild()...
例如，你可以创建一个类 `gray-scale`，然后在 JavaScript 中添加或删除它： ```javascript document.getElementById('yourButton').addEventListener('click', function() { document.body.classList.toggle('...
在这个例子中，我们有一个名为`serchResult`的容器，其中包含所有待删除的`div`子元素。可以通过`getElementById`或`querySelectorAll`等方法获取这些元素。 2. **反向遍历**：为了确保在删除元素时不改变正在遍历...
标题中的“jQPage”可能是指一种利用jQuery来动态创建和管理页面元素的方法，特别是从数组中解析数据来构建页面结构。这种方法在数据驱动的Web应用中非常常见，比如表格展示、列表滚动加载等。 动态解析数组获得...
这个函数用于创建一个新的`div`元素并将其添加到页面上。函数接收两个参数，`w`代表宽度，`h`代表高度。以下是函数内部的关键步骤： 1. `deleteDiv()`：在创建新的`divCell`之前，先检查是否存在名为`divCell`的层...
在HTML页面中，JavaScript可以用来动态地改变页面元素，包括添加和删除元素。这为网页提供了丰富的用户体验，使得用户在不刷新整个页面的情况下也能看到实时更新的内容。 首先，我们来看如何通过JavaScript向HTML...
这个事件创建了一个新的`<input>`元素，并将其添加到ID为`container`的`<div>`中。 接下来，让我们看看如何删除表单元素。假设我们希望点击某个元素时，删除它自身。下面是一个例子： ```html <!DOCTYPE html> ...
例如，如果购物车页面有一个特定的ID为"cart-items"的`<div>`元素，我们可以使用JavaScript的`document.getElementById()`方法获取这个节点： ```javascript var cartDiv = document.getElementById('cart-items');...
本示例“jquery之div添加取消及内容替换demo.rar”旨在为初学者提供一个关于如何使用jQuery操作div元素的教程，包括添加、移除div以及替换其内容的方法。 首先，`jquery.js`是jQuery库的核心文件，它是实现这些功能...
在本示例中，我们探讨了如何在Vue中实现动态添加和删除元素的功能。这个例子是一个简单的用户信息管理界面，用户可以创建新的信息条目（姓名、年龄、性别）并将其添加到列表中，同时也能删除已有的条目。 首先，...
在上面的例子中，`body`元素作为代理，所有的`button`点击事件都会被捕捉，无论这些按钮是在页面加载时还是之后动态添加的。 在实际开发中，`livequery.js`插件可能不再必要，因为`on()`方法已经足够强大。但如果你...
首先，我们来看一个简单的例子，演示如何在页面加载完成后向一个ID为`father`的`div`元素中添加一个新的`div`。这个例子中，`jQuery`的`$(document).ready()`函数确保在页面DOM加载完成后再执行内部的代码。如下所示...
这可以通过增加额外的逻辑来实现，比如检查当前已有输入框的数量，或者添加一个删除按钮并绑定相应的删除事件。 此外，为了提高用户体验，还可以考虑使用AJAX异步提交表单，以便在用户添加完所有姓名后一次性发送...
本示例主要讲解了如何使用JavaScript来创建、添加和克隆页面元素节点，这些都是前端开发中常见的操作。下面将详细解析这些方法： 首先，我们获取页面上的某个特定元素。在这个例子中，我们通过`getElementById`方法...
总结来说，jQuery的`remove()`和`empty()`方法是处理DOM元素删除的关键工具。`remove()`可以删除元素及其所有子元素，而`empty()`仅清除元素内的子元素。结合选择器的使用，可以实现更精确的元素筛选和删除，提高...