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

时间：2017-09-01 18:08:42

标签： jquery html css

信息：我正在尝试构建一个多个待办事项列表应用。单击“创建”按钮时，将在侧面板中创建一个包装类，该类包含class = item（用户i / p）和删除图标（fa.fa.trash）。此外，还有一个div块，在中间面板中为侧面板中创建的每个项目创建了class = todolistblock。这个todolistblock的父类也是包装类。

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

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

请告诉我哪里出错了。这段代码也有效吗？

＆＃13;
＆＃13; 
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;
  });

});
＆＃13; 
* {
  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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：2)

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

（改进，您可以使用类名而不是class="todo_1"或class="todo_2"等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
    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>

答案 1 :(得分：2)

两个元素不应具有相同的ID，但它们会在您的代码中执行。 jQuery will only return the first matching element when using an id selector.

  

每个id值只能在文档中使用一次。如果超过   一个元素已分配相同的ID，使用该ID的查询   只会选择DOM中第一个匹配的元素。这种行为   但是，不应该依赖;包含多个文档的文档   使用相同ID的元素无效。

由于您的两个div标记具有相同的ID，因此它只会删除第一个匹配的项目。您可以在下面看到相同的行为。

更改为使用不同的ID，或者如果您需要将id引用保持为其他目的，则可以使用类名。

$(document).ready(function() {
  var idquery = $("#child");
  alert("found " + idquery.length + " items using id query");
  var classquery = $(".child");
  alert("foudn " + classquery.length + " items using class query");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="parent1">
  <div id="child" class="child">
  child content
  </div>
</div>
<div id="parent2">
  <div id="child" class="child">
  child content
  </div>
</div>

相关问题
最新问题