时间戳

首页 > 解决方案 > 如何删除动态 jQuery 手风琴元素

javascript - 如何删除动态 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\">&nbsp</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">&nbsp</i>Empathize</button>
          <button id="addDefine" class="btn def-btn"><i class="fas fa-bullseye">&nbsp</i>Define</button>
          <button id="addIdeate" class="btn idea-btn"><i class="far fa-lightbulb">&nbsp</i>Ideate</button>
          <button id="addPrototype" class="btn prot-btn"><i class="fas fa-pencil-ruler">&nbsp</i>Prototype</button>
          <button id="addTest" class="btn test-btn"><i class="fas fa-vial">&nbsp</i>Test</button>
        </div>

        <!-- START ACCORDION ELEMENT  -->
        <div>
          <div id="accordion"></div>
        </div>
        <!-- END ACCORDION ELEMENT -->

      </div>
    </body>

如您所见，最后几行是删除最近部分的功能。但是，它不会删除创建的元素，而是会破坏任何创建的新部分。知道如何解决这个问题吗？

我只显示其中一个按钮的代码，因为它们的工作方式几乎相同，只是手风琴内容不同。重要的是它们都为 SAME 手风琴添加了不同的元素。

标签： javascriptjquerydynamicaccordion

解决方案

您可以尝试使用委托方法，如下所示：

$('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\">&nbsp</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', '.delete', 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">&nbsp</i>Empathize</button>
            <button id="addDefine" class="btn def-btn"><i class="fas fa-bullseye">&nbsp</i>Define</button>
            <button id="addIdeate" class="btn idea-btn"><i class="far fa-lightbulb">&nbsp</i>Ideate</button>
            <button id="addPrototype" class="btn prot-btn"><i class="fas fa-pencil-ruler">&nbsp</i>Prototype</button>
            <button id="addTest" class="btn test-btn"><i class="fas fa-vial">&nbsp</i>Test</button>
        </div>

        <!-- START ACCORDION ELEMENT  -->
        <div>
            <div id="accordion"></div>
        </div>
        <!-- END ACCORDION ELEMENT -->

    </div>
</body>

推荐阅读