搜索
搜索

如何删除两个具有不同ID和相同类的动态生成的div块

mit katwala 发表于 Dev
91
米特·卡特瓦拉

信息：我正在尝试构建多个待办事项应用程序。单击创建按钮后，将在侧面板中创建一个包装类，该包装类由class = item（用户i / p）和删除图标（fa.fa.trash）组成。另外，在侧面板中为侧面板中创建的每个项目创建了一个带有class = todolistblock的div块。此todolistblock的父类也是包装器类。

预期的输出：单击删除图标时，应删除侧面板中的相应包装类（项目和删除图标）和中间面板中的包装类（todolistblock）。我为创建的每个包装器类生成一个不同的动态ID。

当前o / p：尽管它们具有相同的对应动态ID，但它仅删除侧面板中的包装类，并且不对中间面板中的包装类做任何操作。

请让我知道我要去哪里错了。这段代码也有效吗？

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">'; //delete icon
var todolistblock = '<div class="todolistblock">'; //a block created in middlepanel when creating a list
var i = 1; //to give a unique id to each wrapper div
$(document).ready(function() {
  $('#createlistbutton').click(function() {
    var container = '<div class="wrapper" id="' + i + '">'; //each wrapper div has a different id
    i++; //increment the counter
    var toAdd = $('input[name=newlistitem]').val(); //i/p from user
    if (count < maxvalue) {
      $('.categories').append(container + listitem + toAdd + '</div>' + deleteicon + '</div>' + '</div>'); //dynamic adding item
      $('.middlepanel').append(container + todolistblock + '</div>' + '</div>'); //adding a div block in middlepanel
      count += 1;
    } else {
      alert("Not more than 9 list can be created");
    }
  });

  $('main').on('click', ".fa.fa-trash", function() {
    var wrapid = $('.wrapper').attr("id"); //getting the unique id of wrapper class with corresponding delete icon
    $('#' + wrapid).remove(); //delete wrap class with the same id in side & middle panel 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");
  width: 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: 25%;
  float: left;
  text-align: center;
  height: 80%;
  background-color: white;
}

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

#createlistbutton {
  font-weight: bold;
  color: #ffffff;
  background-color: #303030;
  display: inline-block;
  cursor: pointer;
}

input[type=text] {
  width: 60%;
  display: inline-block;
}

.wrapper {
  text-align: center;
}

.item {
  border: 1px solid #303030;
  background-color: lightcyan;
  border-radius: 10px;
  margin-bottom: 1em;
  display: inline-block;
  width: 90%;
  cursor: pointer;
}

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

.categories {
  position: inherit;
  max-height: 80%;
}

.chatpanel {
  width: 25%;
  float: right;
  text-align: center;
  height: 80%;
  background-color: white;
}

#tempmsg {
  margin-top: 40%;
}

.middlepanel {
  display: inline-block;
  height: 80%;
  width: 50%;
}

.todolistblock {
  height: 100%;
  position: inherit;
  background-color: red;
}
<!DOCTYPE>
<html>

<head>
  <title>Python Flask App</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script src="src-animation.js"></script>
  <link rel="stylesheet" href="//www.w3schools.com/w3css/4/w3.css">
  <link rel="stylesheet" href="//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="createinputlist">
        <input type="text" name="newlistitem" />
        <button id="createlistbutton">Create List</button>
      </div>
      <br/>
      <div class="categories">
      </div>
    </div>

    <div class="middlepanel">
    </div>

    <div class="chatpanel">
      <p id="tempmsg">Chat Panel<br/>Coming soon</p>
    </div>
  </main>

  <footer>
    <p>COPYRIGHT &copy 2017 PowerSoft</p>
  </footer>
</body>

</html>

Dalin Huang

id对于每个页面都是唯一的，如果在此面板中使用了id，则不会在另一个面板上选择相同的id，请确保为每个元素创建一个唯一的id。

（改进，您可以使用类名，而不要使用ID之类的IDclass="todo_1"或class="todo_2"etc）

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">'; //delete icon
var todolistblock = '<div class="todolistblock">'; //a block created in middlepanel when creating a list
var i = 1; //to give a unique id to each wrapper div
$(document).ready(function(){
	$('#createlistbutton').click(function(){
    var container = '<div class="wrapper" id="'+i+'">'; //each wrapper div has a different id
    var containerTodo = '<div class="wrapper" id="todo'+i+'">'; 
    i++; //increment the counter
  	var toAdd = $('input[name=newlistitem]').val(); //i/p from user
    if(count<maxvalue) {
    	$('.categories').append(container + listitem +toAdd + '</div>' + deleteicon + '</div>' +'</div>');//dynamic adding item
        $('.middlepanel').append(containerTodo + todolistblock + toAdd + '</div>' + '</div>');//adding a div block in middlepanel
        count +=1;
    } else {
      alert("Not more than 9 list can be created");
    }      
  });  
   
  $('main').on('click',".fa.fa-trash", function(){
    var thisId = $(this).parent().attr('id');
    $('#'+thisId).remove();//delete wrap class with the same id in side & middle panel when clicked on deleteicon
    $('#todo'+thisId).remove();
    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");
  width: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:25%;
   float:left;
   text-align:center;
   height:80%;
   background-color:white;
  }

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

#createlistbutton{
    font-weight:bold;
    color:#ffffff;
    background-color:#303030;
    display:inline-block;
    cursor:pointer;
	}

input[type=text]{
  width:60%;
  display:inline-block;
}

.wrapper{
  text-align:center;
  
}
.item{
  border: 1px solid #303030;
  background-color:lightcyan;
  border-radius:10px;
  margin-bottom:1em;
  display:inline-block;
  width:90%;
  cursor:pointer;
  
}

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

.categories{
  position:inherit;
  max-height:80%;
}

.chatpanel{
   width:25%;
   float:right;
   text-align:center;
   height:80%;
   background-color:white;
  }

#tempmsg{
  margin-top:40%;
  
}
  
.middlepanel{
  display:inline-block;
  height:80%;
  width:50%;
}

.todolistblock{
  height:100%;
  position:inherit;
  background-color:red;
}
<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="createinputlist">
  		<input type="text" name="newlistitem"/>
  	    <button id="createlistbutton">Create List</button>
    </div>
    <br/>
    <div class="categories">
  	</div>
  </div>
  
  <div class="middlepanel">
  </div>
    
  <div class="chatpanel">
    <p id="tempmsg">Chat Panel<br/>Coming soon</p>
  </div>
  </main>
    
  <footer>
    <p>COPYRIGHT &copy 2017 PowerSoft</p>
  </footer>
  </body>

</html>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何使用Java中具有不同类的两个对象和具有compare字段的列表进行过滤

使用jQuery在两个具有相同类的div之间检索HTML数据

如何知道JavaScript中是否存在两个具有相同ID的div？

具有相同名称和不同模板参数的两个结构如何工作

具有两个不同类的array_map？

具有相同自动生成ID的两个表

两个块：一个具有动态宽度，一个具有与动态宽度相同的宽度

具有随机值的两个不同类具有相同的输出

如何为两个参数都具有相同类型的对编写monad实例？

如何通过DI注入两个相同类型但具有一个属性不同的对象？

指向相同内存的具有不同类型的两个二维数组

为什么在使用动态类型和动态绑定时，两个具有相同名称（属于不同类）的方法应具有相同的原型？

具有相同内容的两个相同HDD如何具有不同的可用空间量？

在目录数据库中具有两个不同类别ID的产品ID

区分具有相同类的两个html元素

如何在具有相同类名的div中动态设置不同的<a href>和<img src>？

Java模板，如何使用两个具有相同名称和不同类型的类

当不同类型的两个节点对于某个属性具有相同的值时，如何与 cypher 建立关系？

检查具有相同类的两个元素的两个 ID 是否相等

使用具有两个相同类的两个 div 的 Javascript

我如何以不同的方式设置两个相同类的 div？

如何删除两个具有相同id的json对象

如何连接两个具有相同 id 的对象

如何区分两个具有相同 id 的 WebElements？

如何在不同的头文件中具有相同类型和名称的两个结构而不会发生冲突？

给具有相同类的两个元素一个唯一的 id

生成具有相同唯一 id 的具有不同扩展名的两个文件

如何添加 </div> 以分隔具有不同类的两个不同元素

难以从具有相同类的两个 div 中抓取数值

TOP 榜单

  1. 1

    UITableView的项目向下滚动后更改颜色，然后快速备份

  2. 2

    Linux的官方Adobe Flash存储库是否已过时？

  3. 3

    用日期数据透视表和日期顺序查询

  4. 4

    应用发明者仅从列表中选择一个随机项一次

  5. 5

    Mac OS X更新后的GRUB 2问题

  6. 6

    验证REST API参数

  7. 7

    Java Eclipse中的错误13，如何解决？

  8. 8

    带有错误“ where”条件的查询如何返回结果？

  9. 9

    ggplot：对齐多个分面图-所有大小不同的分面

  10. 10

    尝试反复更改屏幕上按钮的位置 - kotlin android studio

  11. 11

    如何从视图一次更新多行（ASP.NET - Core）

  12. 12

    计算数据帧中每行的NA

  13. 13

    蓝屏死机没有修复解决方案

  14. 14

    在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

  15. 15

    离子动态工具栏背景色

  16. 16

    VB.net将2条特定行导出到DataGridView

  17. 17

    通过 Git 在运行 Jenkins 作业时获取 ClassNotFoundException

  18. 18

    在Windows 7中无法删除文件（2）

  19. 19

    python中的boto3文件上传

  20. 20

    当我尝试下载 StanfordNLP en 模型时，出现错误

  21. 21

    Node.js中未捕获的异常错误，发生调用

热门标签

归档