个人中心
gpt4 book ai didi

单击删除图标时，JQuery 代码不会删除关联的动态添加的字段

转载 作者：行者123 更新时间：2023-11-28 02:38:39 24 4
gpt4 key购买 nike

信息:我是编程新手，正在尝试创建待办事项列表。在按下创建列表按钮时，将动态生成一个带有类包装的 div，其中包含另外两个 div:1) 来自具有类“item”的用户的输入。 2) 删除带有 class='fa fa-trash' 的图标。所有这些单独的包装 div 都包含在一个带有 class="list"的主 div

预期的 o/p: 我想要的是单击删除图标 (class="fa fa-trash") 时，整个关联的 class="wrap"的 div 被删除，即一​​个列表项被删除

当前 o/p:无论我尝试通过单击删除图标删除(从列表中)哪个包装，它总是会删除添加的最旧的包装。

请告诉我为什么在单击删除图标时它不会删除相应的包装，而是删除最早添加的元素(包装)。

jQuery 代码:

var maxvalue=9; //to restrict the number of list items created
var count = 0; //to count the number of list items created
var listitem = '<div class="item">'; //every item i/p by user is in class item
var deleteicon = '<div class="fa fa-trash">'; 
var wrap = '<div class="wrapper" id="dynamic">';//to wrap the deleteicon & user i/p in a div

$(document).ready(function(){
	$('#createlistbutton').click(function(){
		var toAdd = $('input[name=newlistitem]').val(); //i/p from user
        if(count<maxvalue)
        {
          $('.list').append(wrap + listitem +toAdd + '</div>' + deleteicon + '</div>' +'</div>');//dynamic adding item
          count +=1;
        }
        
        else
        {
          alert("Not more than 9 list can be created");
        }
      
    $('.fa.fa-trash').on('click',function(){
      
      $(this).parent().remove();//delete parent item(wrap) when clicked on deleteicon
      count -= 1;
     
    });
      
    });
    
});
-*{  margin:0;
	padding:0;
	}

body{
  display: flex;
  flex-direction:column;
  font-family: "Times New Roman","Open Sans",sans-serif;
  font-size: 16px;
 /**background: linear-gradient(45deg, #f06, yellow);**/ 
  background-color: #b9d2d4;
  background-image: url("https://www.transparenttextures.com/patterns/45-degree-fabric-dark.png");
  height:100%;
}

h3{
  color:white;
  margin: 18 0 0 10;
  display: inline-block;
}

.nav-bar{
  height: 10%;
  background-color:#303030;
}
ul{
  list-style-type:none;
  display: inline-block;
  margin:0;
  margin-right:15;
  padding:0;
  float:right;
  overflow:hidden;
}

li{
  float:left;
  margin-top:5;
  
}

li a{
  display:block;
  text-decoration:None;
  padding: 8px;
  color:#ffffff;
   padding: 14px 16px;
  text-align:center;
}

li a:hover{
  text-decoration:underline;
}

footer p{
   margin-top:25px;
   }

footer{
   position:fixed;
   left:0px;
   bottom:0px;
   height:10%;
   width:100%;
   color:#ffffff;
   background:#303030;}
   

   
.sidepanel{
   width:30%;
   float:left;
   text-align:center;
   height:80%;
   background-color:white;
  }

.inputlist{
  position:relative;
  display:inline-block;
  margin-top:1em;
  margin-bottom: 1em;
   
}

#createlistbutton{
    font-weight:bold;
    color:#ffffff;
    background-color:#303030;
	}

form{
  display:inline-block;
}

.item{
  border: 1px solid grey;
  background-color:lightcyan;
  border-radius:15px;
  margin-bottom:1em;
  width=80%;
}

.fa.fa-trash{
  display:inline-block;
}

.list{
  position:inherit;
  width=80%;
  max-height:80%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE>
<html>
<head>
  <title>Python Flask App</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script src="src-animation.js"></script>
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
  <header>
  <div class="nav-bar">
    <h3>PYTHON FLASK APP</h3>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Sign in</a></li>
      <li><a href="#">Sign up</a></li>
    </ul>
  </div>
  </header>
  <main>
  <div class="sidepanel">
    <div class="inputlist">
    <form name="newlistform">
  		<input type="text" name="newlistitem"/>
  	</form>
  	<button id="createlistbutton">Create List</button>
    </div>
    <br/>
    <div class="list">
  	</div>
  </div>
  </main>
  <footer>
    <p>COPYRIGHT &copy 2017 PowerSoft</p>
  </footer>
  </body>
</html>

样本:http://jsbin.com/magikewuge/edit?html,css,js,output

最佳答案

给您一个解决方案 https://jsfiddle.net/1Lg0f9ms/ 

var maxvalue=9; //to restrict the number of list items created
var count = 0; //to count the number of list items created
var listitem = '<div class="item">'; //every item i/p by user is in class item
var deleteicon = '<div class="fa fa-trash">'; 
var wrap = '<div class="wrapper" id="dynamic">';//to wrap the deleteicon & user i/p in a div

$(document).ready(function(){
	$('#createlistbutton').click(function(){
  	var toAdd = $('input[name=newlistitem]').val(); //i/p from user
    if(count<maxvalue) {
    	$('.list').append(wrap + listitem +toAdd + '</div>' + deleteicon + '</div>' +'</div>');//dynamic adding item
      count +=1;
    } else {
      alert("Not more than 9 list can be created");
    }
  });  
   
  $(document).on('click','.fa.fa-trash', function(){
  	$(this).parent().remove();//delete parent item(wrap) when clicked on deleteicon
    count -= 1;   
  });
    
});
-*{  margin:0;
	padding:0;
	}

body{
  display: flex;
  flex-direction:column;
  font-family: "Times New Roman","Open Sans",sans-serif;
  font-size: 16px;
 /**background: linear-gradient(45deg, #f06, yellow);**/ 
  background-color: #b9d2d4;
  background-image: url("https://www.transparenttextures.com/patterns/45-degree-fabric-dark.png");
  height:100%;
}

h3{
  color:white;
  margin: 18 0 0 10;
  display: inline-block;
}

.nav-bar{
  height: 10%;
  background-color:#303030;
}
ul{
  list-style-type:none;
  display: inline-block;
  margin:0;
  margin-right:15;
  padding:0;
  float:right;
  overflow:hidden;
}

li{
  float:left;
  margin-top:5;
  
}

li a{
  display:block;
  text-decoration:None;
  padding: 8px;
  color:#ffffff;
   padding: 14px 16px;
  text-align:center;
}

li a:hover{
  text-decoration:underline;
}

footer p{
   margin-top:25px;
   }

footer{
   position:fixed;
   left:0px;
   bottom:0px;
   height:10%;
   width:100%;
   color:#ffffff;
   background:#303030;}
   

   
.sidepanel{
   width:30%;
   float:left;
   text-align:center;
   height:80%;
   background-color:white;
  }

.inputlist{
  position:relative;
  display:inline-block;
  margin-top:1em;
  margin-bottom: 1em;
   
}

#createlistbutton{
    font-weight:bold;
    color:#ffffff;
    background-color:#303030;
	}

form{
  display:inline-block;
}

.item{
  border: 1px solid grey;
  background-color:lightcyan;
  border-radius:15px;
  margin-bottom:1em;
  width=80%;
}

.fa.fa-trash{
  display:inline-block;
}

.list{
  position:inherit;
  width=80%;
  max-height:80%;
}
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<header>
  <div class="nav-bar">
    <h3>PYTHON FLASK APP</h3>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Sign in</a></li>
      <li><a href="#">Sign up</a></li>
    </ul>
  </div>
  </header>
  <main>
  <div class="sidepanel">
    <div class="inputlist">
    <form name="newlistform">
  		<input type="text" name="newlistitem"/>
  	</form>
  	<button id="createlistbutton">Create List</button>
    </div>
    <br/>
    <div class="list">
  	</div>
  </div>
  </main>
  <footer>
    <p>COPYRIGHT &copy 2017 PowerSoft</p>
  </footer>

您的代码可能正在运行，但这不是正确的做法。

由于您的 .fa.fa-trash 元素是动态生成的，您需要将一个事件从 document 委托(delegate)给 .fa.fa-trash 以进行删除。

关于单击删除图标时，JQuery 代码不会删除关联的动态添加的字段，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45648335/

24 4 0
文章推荐： html - 谷歌图表作为带有特定格式 ruby​​ on rails 的图像标签
文章推荐： css - 修改 css 搜索工具栏
文章推荐： jquery - 菜单中 FadeItems 的结构和设计
文章推荐： c++ - 尝试从文件中读取时出现超出范围错误？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com