使用JavaScript或者jquery删除表单中所有的div元素

admin · 发表于2015-07-23 16:53:29

liufangyuan · 发表于2016-10-21 09:53:52

<html>
    <head>
       <title>
              使用JavaScript或者jquery删除表单中所有的div元素
       </title>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       <script src="./jquery-1.11.3.min.js"></script>
        <script type="text/javascript">
            //Jquery
            // $(function()
            //     {
            //         $('#btn').click(function()
            //             {

            //                 console.log("00");
            //                 var arr=$('div');
            //                 //alert(arr.length);

            //                 $.each(arr,function(index,obj)
            //                     {
            //                         //alert(index);
            //                         //alert(obj);
            //                         $(obj).hide();
            //                     });


            //             });

            //     });
            $("btn").click(function () {
                //$("div").each(function (index,obj)
                //{
                      // domEle == this
                      $('div').remove();

                //});
            });

        </script>
    </head>
    <body>

                <table>
                        <tr>
                            <th>姓名</th>
                            <th>性别</th>
                            <th>年龄</th>
                            <th>户籍所在地</th>
                        </tr>
                        <div name=div1>
                            <tr>
                                <td>刘方园</td>
                                <td>女</td>
                                <td>23</td>
                                <td>邯郸</td>
                            </tr>
                        </div>
                        <div name=div1>
                            <tr>
                                <td>苏爱阳</td>
                                <td>男</td>
                                <td>23</td>
                                <td>邢台</td>
                            </tr>
                        </div>
                </table>
                <input type="button" value="删除数据" id="btn"/>


    </body>

</html>

//待改进

740317431 · 发表于2017-09-15 16:32:20

$('div').remove();

王之神判 · 发表于2017-09-16 11:35:59

	<script>
		$(document).ready(function(){
			$("#btnOK3").click(function(){
				$("form div").remove();
			});
		});
	</script>
	<body>
		<form>
			<div>
				<input id="btnOK1" type="button" />
				<div>
					<input id="btnOK2" type="button" />
				</div>
			</div>
		</form>
		<div>
			<input id="btnOK3" type="button" value="删除form表单中的div元素"/>
		</div>
	</body>

wulinan · 发表于2017-09-22 08:17:17

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'text.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<script type="text/javascript" src="<%=path %>/static/js/jquery-1.11.3.min.js"></script>
   <script type="text/javascript">
      $(document).ready(function()
      {
      	$("#btn").on("click",function()
      	{
     
      	  $("form div").remove();
      	 
      	 //js
      	  //arr=document.getElementsByTagName("div");
      	  //for(i=arr.length-1;i>=0;i--){
      	  //js:得到父元素，通过父元素将子元素删除
      	  //if(arr[i].parentNode.tagName=="Form"){
      	  
      	     // arr[i].parentNode.removeChild(arr[i]);
      	  //}
      	  //}
      	
      	});
      
      });
   </script>
  </head>
  
  <body>
   <form>
   		<div>div1</div>
   		<div>div2</div>
   		<div>div3</div>
   		<div>div4</div>
   
   </form>
   <div>div5</div>
   <input type="button" id="btn" value="删除" >
  </body>
</html>

用户名			找回密码
密码			立即注册

学习平台

使用JavaScript或者jquery删除表单中所有的div元素