如何解决如何删除动态 jQuery 手风琴元素
我有一个动态 jQuery 手风琴,它根据我按下的按钮添加不同的手风琴元素。到目前为止一切顺利,但我无法在每个元素中添加一个删除按钮来删除新创建的项目。这是我目前所拥有的:
$('#accordion').accordion();
$( function() {
$( "#accordion" ).accordion();
//ADD NEW EMPATHIZE ELEMENT TO ACCORdioN WITH BUTTON 1
$('#addEmpathize').on('click',function() {
let newEmpathize = document.createElement('section');
let newDiv = document.createElement('div');
let newDeleteBtn = document.createElement('div')
let acc = document.getElementById('accordion');
//CREATES NEW TITLE
newEmpathize.innerHTML =
"<div class='empathize'>" +
"<div class='title'><i class=\"far fa-heart\"> </i>EMPATHIZE</div>" +
"<div class='push-right'>" +
"<span style='margin-right: 20px; font-size: 16px'><i class=\"far fa-times-circle\"></i></span>|<span style='margin-left: 20px; margin-right: 20px'><a><i class='fas fa-chevron-down rotate'></i></a></span>" +
"</div>" +
"</div>";
//CREATES CONTENT INSIDE ACCORdioN SECTION
newDiv.innerHTML = "<div class='inline'><div class='card'>ITEM 1</div><div class = 'card' > ITEM 2 < /div><div class='card'>ITEM 3</div > < /div>";
//CREATES DELETE BUTTON
newDeleteBtn.innerHTML = "<div><button class='delete'>Delete</button></div>"
//APPENDS ELEMENTS TO ACCORdioN AND REFRESHES
acc.appendChild(newEmpathize);
acc.appendChild(newDiv);
acc.appendChild(newDeleteBtn);
$("#accordion").accordion("refresh");
});
})
//DELETE FUNCTION
$('.delete').on('click',function() {
$(this).closest(section).remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
<body>
<div class="container">
<div class="btn-Box">
<button id="addEmpathize" class="btn emp-btn"><i class="far fa-heart"> </i>Empathize</button>
<button id="addDefine" class="btn def-btn"><i class="fas fa-bullseye"> </i>Define</button>
<button id="addIdeate" class="btn idea-btn"><i class="far fa-lightbulb"> </i>Ideate</button>
<button id="addPrototype" class="btn prot-btn"><i class="fas fa-pencil-ruler"> </i>Prototype</button>
<button id="addTest" class="btn test-btn"><i class="fas fa-vial"> </i>Test</button>
</div>
<!-- START ACCORdioN ELEMENT -->
<div>
<div id="accordion"></div>
</div>
<!-- END ACCORdioN ELEMENT -->
</div>
</body>
如您所见,最后几行是删除最近部分的功能。但是,它不会删除创建的元素,而是中断创建的任何新部分。知道如何解决这个问题吗?
谢谢!
PS:我只展示了其中一个按钮的代码,因为它们的工作方式几乎相同,只是手风琴内容不同。重要的是它们都为 SAME 手风琴添加了不同的元素。
解决方法
您可以尝试使用委托方法,如下所示:
$('body').on('click','.delete',function(){.....
此外,您应该在 section 周围使用引号。
我稍微更新了标记以包含父元素内的每个组:
演示:
//ADD NEW EMPATHIZE ELEMENT TO ACCORDION WITH BUTTON 1
$('#addEmpathize').on('click',function() {
$('#accordion').accordion(); // added to initialize accordion
let newEmpathize = document.createElement('section');
let newDiv = document.createElement('div');
let newDeleteBtn = document.createElement('div')
let acc = document.getElementById('accordion');
//CREATES NEW TITLE
newEmpathize.innerHTML =
"<div class='empathize'>" +
"<div class='title'><i class=\"far fa-heart\"> </i>EMPATHIZE</div>" +
"<div class='push-right'>" +
"<span style='margin-right: 20px; font-size: 16px'><i class=\"far fa-times-circle\"></i></span>|<span style='margin-left: 20px; margin-right: 20px'><a><i class='fas fa-chevron-down rotate'></i></a></span>" +
"</div>" +
"</div>";
//CREATES CONTENT INSIDE ACCORDION SECTION
newDiv.innerHTML = "<div class='inline'><div class='card'>ITEM 1</div><div class='card'>ITEM 2</div><div class='card'>ITEM 3</div></div>";
//CREATES DELETE BUTTON
newDeleteBtn.innerHTML = "<div><button class='delete'>Delete</button></div>"
//APPENDS ELEMENTS TO ACCORDION AND REFRESHES
var parentEl = document.createElement('div'); // create an element as parent
parentEl.classList.add('deleteParent'); // set class to the element
parentEl.appendChild(newEmpathize);
parentEl.appendChild(newDiv);
parentEl.appendChild(newDeleteBtn);
acc.appendChild(parentEl); // add the parent element
$( "#accordion" ).accordion("refresh");
});
//DELETE FUNCTION
$('body').on('click',function(){
$(this).closest('.deleteParent').remove(); // remove the respective group
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>
<div class="container">
<div class="btn-box">
<button id="addEmpathize" class="btn emp-btn"><i class="far fa-heart"> </i>Empathize</button>
<button id="addDefine" class="btn def-btn"><i class="fas fa-bullseye"> </i>Define</button>
<button id="addIdeate" class="btn idea-btn"><i class="far fa-lightbulb"> </i>Ideate</button>
<button id="addPrototype" class="btn prot-btn"><i class="fas fa-pencil-ruler"> </i>Prototype</button>
<button id="addTest" class="btn test-btn"><i class="fas fa-vial"> </i>Test</button>
</div>
<!-- START ACCORDION ELEMENT -->
<div>
<div id="accordion"></div>
</div>
<!-- END ACCORDION ELEMENT -->
</div>
</body>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。