添加和删除按钮无法正常工作 Jquery

Question

Hi I am having this issue where my add buttons work only if they are outside the function and my remove buttons only works when they are inside the function.嗨，我遇到了这个问题，我的添加按钮仅在函数外部时才起作用，而删除按钮仅在函数内部时起作用。 I've tried putting the add buttons outside and only remove buttons inside the group and they work fine.我试过将添加按钮放在外面，只删除组内的按钮，它们工作正常。 I am using jquery.我正在使用 jquery。 Can someone please help and explain me how to fix this?有人可以帮我解释一下如何解决这个问题吗？ Thank you!谢谢！

 // add row $("#addRow").click(function() { var html = ''; html += '<div class="container">'; html += ' <div id="card-group">'; html += '<div class="card card-outline card-warning">'; html += '<div class="card-header">Panel with panel-primary class</div>'; html += '<div class="card-body">'; html += '<label>Main Question</label>'; html += '<input type="text" class="form-control">'; html += ' <div id="card-subody" style="padding: 50px;">'; html += '<label>Sub Question</label>'; html += '<div id="newsubRow"></div>'; html += '<div id="card-subtext">'; html += '<input type="text" class="form-control">'; html += ' <button id="addgrpRow" type="button" class="btn btn-success">This add button doesnt work</button>'; html += ' <button id="removegrpRow" type="button" class="btn btn-danger">This Remove button works</button>'; html += '</div>'; html += '</div>'; html += '</div>'; html += '</div>'; html += '<button id="addRow" type="button" class="btn btn-info">This add group button doesnt work</button>'; html += '<button id="removeRow" type="button" class="btn btn-danger">This Remove Group button works</button>'; html += '</div>'; html += '</div>'; $('#newRow').append(html); }); $("#addgrpRow").click(function() { var html = ''; html += '<div id="card-subtext">'; html += '<input type="text" class="form-control" placeholder="Example: SO1.">'; html += '<button id="addgrpRow" type="button" class="btn btn-success">This add sub question button doesnt work</button>'; html += '<button id="removegrpRow" type="button" class="btn btn-danger">This Remove sub question button works</button>'; html += '</div>'; $('#newsubRow').append(html); }); $(document).on('click', '#removeRow', function() { $(this).closest('#card-group').remove(); }); // remove row $(document).on('click', '#removegrpRow', function() { $(this).closest('#card-subtext').remove(); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <body> <div id="newRow"></div> <div class="container"> <div id="card-group"> <div class="card card-outline card-warning"> <div class="card-header"> <h3 class="card-title">Group</h3> </div> <div class="card-body"> <label>Main Question</label> <input type="text" class="form-control"> <div id="card-subody" style="padding: 50px;"> <label>Sub Question</label> <div id="newsubRow"></div> <div id="card-subtext"> <input type="text" class="form-control"> <button id="addsubRow" type="button" class="btn btn-success">This add sub question button doesnt work</button> <button id="removegrpRow" type="button" class="btn btn-danger">This Remove sub question button works</button> </div> </div> </div> </div> </div> <button id="addgrpRow" type="button" class="btn btn-success">This add sub question button works</button> <button id="addRow" type="button" class="btn btn-info">This add group button works</button> <button id="removeRow" type="button" class="btn btn-danger">This Remove Group button doesnt work</button> </div> </body>

This is what it looks like.这就是它的样子。 As you can see the buttons are inside the group but whenever I try and use some of the add and remove buttons it doesn't work.如您所见，按钮位于组内，但是每当我尝试使用某些添加和删除按钮时，它都不起作用。 The next picture is what it looks like when I add a sub question and another group下图是当我添加一个子问题和另一个组时的样子

The second image is what it looks like when I try to add a group and a sub question.第二张图是我尝试添加组和子问题时的样子。 First you can see that the sub question that I tried to add on the first group went down with the 2nd group that I added.首先，您可以看到我尝试在第一组中添加的子问题与我添加的第二组一起下降。 If I try and use the add button in the sub question inside the group, It doesn't work.如果我尝试使用组内子问题中的添加按钮，则不起作用。 But when I use the add button on the outside to add a sub question it works.但是当我使用外部的添加按钮添加子问题时，它起作用了。 That thing also happen with the add group button but whenever the add group button is outside, I can add a new group.添加组按钮也会发生这种情况，但是只要添加组按钮在外面，我就可以添加一个新组。 I have included my code so you can try and see the results if it is confusing.我已经包含了我的代码，所以如果它令人困惑，你可以尝试查看结果。

Answer 1

There doesn't seem to be a function for 'addsubRow' so that's why that button won't work.似乎没有“addsubRow”的功能，这就是该按钮不起作用的原因。

Using closest() method won't work like you intend to.使用closest() 方法不会像您打算的那样工作。 You are trying to remove an element which is in an entirely different div.您正在尝试删除一个完全不同的 div 中的元素。

添加和删除按钮无法正常工作 Jquery

问题描述

1 个解决方案

解决方案1
-1 2021-10-23 17:58:28

添加和删​​除按钮无法正常工作 Jquery

问题描述

1 个解决方案

解决方案1 -1 2021-10-23 17:58:28

添加和删除按钮无法正常工作 Jquery

解决方案1
-1 2021-10-23 17:58:28