.Remove() removes all div elements
Question
I am working on an php page that adds an li element on button click that is sortable due to jquery. What I am having an issue with is closing/removing that li element. Below is what I am using:
What is occurring is all the li elements are removed from the page and all I would like is the parent li to be removed.
I have checked around but couldn't find anything to resolve the issue.
Jquery Remove | Delete Parent | Remove Parent
I believe this has to do with my jquery but I can't find out where.
$(function() { $("#sortable").sortable(); $("#sortable").disableSelection(); }); $(document).ready(function() { $("#button").click(function() { $("#sortable").append('<li class="ui-state-default"><div id="menu" style="position: relative; margin-top:3px; font-size:25px; width:100%; height:30px;"><a id="close" href="" class="close">x</a><div id="box-name">Test 1</div></div></div></li>'); }); }); $(document).on('click', '.close', function() { $(this).parent('.ui-state-default').remove(); //$(this).closest('.ui-state-default').fadeOut(300); });
#sortable { list-style-type: none; margin: 0; padding: 0; width: 300px; height: 120px; } #sortable li { margin: 1%; float: left; width: 23.00%; height: 97.5%; font-size: 4em; text-align: center; background-color: #fff; border-radius: 4px; box-shadow: 0 0 12px .5px #000; }
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <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> <!DOCTYPE html> <html> <head> <title></title> </head> <script> </script> <body> <div id=""> <!-- button to add li --> <input type="button" id="button" value="Click me"> </div> <div class="data"> <!-- Container div --> <ul id="sortable"> <!-- beginning of sortable list --> <li class="ui-state-default"> <!-- li class that is duplicated --> <div id="menu" style="position: relative; margin-top:3px; font-size:25px; width:100%; height:30px;"> <a class="close" id="close" href=""> <!-- a tag to close li --> x </a> <div id="box-name">Test 1</div> </div> </div> </li> </ul> </div> </body> </html>
3 answers
solution1
2 ACCPTED 2017-02-02 16:39:42
The click event listener actually isn't being called because you are navigating away from the initial page. When you click on the anchor element, the href is blank, which redirects you to a blank page. Therefore the elements aren't all being removed, you are actually just looking at a blank page.
You could change the href attributes to href="#" in order to mitigate this.
You can also call event.preventDefault() to prevent this default behavior:
$(document).on('click', '.close', function(event) {
event.preventDefault();
$(this).closest('.ui-state-default').fadeOut(300);
});
In addition, you also need to change id="close" to class="close" since that is what your jQuery selectors are targeting. It's also worth mentioning that id s must be unique. If you find yourself duplicating an id , just use a class instead.
Here is an updated example:
$("#sortable").sortable(); $("#sortable").disableSelection(); $("#button").click(function() { $("#sortable").append('<li class="ui-state-default"><div id="menu" style="position: relative; margin-top:3px; font-size:25px; width:100%; height:30px;"><a class="close" href="#">x</a><div id="box-name">Test 1</div></div></div></li>'); }); $(document).on('click', '.close', function(event) { event.preventDefault(); $(this).closest('.ui-state-default').fadeOut(300); });
#sortable { list-style-type: none; margin: 0; padding: 0; width: 300px; height: 120px; } #sortable li { margin: 1%; float: left; width: 23.00%; height: 97.5%; font-size: 4em; text-align: center; background-color: #fff; border-radius: 4px; box-shadow: 0 0 12px .5px #000; }
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <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> <div> <input type="button" id="button" value="Click me"> </div> <div class="data"> <ul id="sortable"> <li class="ui-state-default"> <div id="menu" style="position: relative; margin-top:3px; font-size:25px; width:100%; height:30px;"> <a class="close" href="#">x</a> <div id="box-name">Test 1</div> </div> </li> </ul> </div>
solution2
0 2017-02-02 16:37:30
I'm assuming you're referring to this $.fadeOut() line, which will hide an element from the page (doesn't $.remove() it though)
$(document).on('click', '.close', function() {
// $(this).parent('.ui-state-default').remove();
$(this).closest('.ui-state-default').fadeOut(300);
});
In your jquery, you append this
$("#sortable").append('<li class="ui-state-default"><div id="menu" style="position: relative; margin-top:3px; font-size:25px; width:100%; height:30px;"><a id="close" href="">x</a><div id="box-name">Test 1</div></div></div></li>');
But you hide elements via this click handler
$(document).on('click', '.close', function() {
Your click handler references .close , but in you jQuery append, you just add #close . So change the code in you jquery append from <a id="close" href=""> to <a id="close" href="" class="close"> . Here's that full line
$("#sortable").append('<li class="ui-state-default"><div id="menu" style="position: relative; margin-top:3px; font-size:25px; width:100%; height:30px;"><a id="close" href="" class="close">x</a><div id="box-name">Test 1</div></div></div></li>');
solution3
0 2017-02-02 16:37:55
You can use jquery first or nth selector
https://api.jquery.com/first-selector/
$( "ul li:first" )
https://api.jquery.com/nth-child-selector/
$( "ul li:nth-child(2)" )
Or combine them if needed
$( "ul:first li:nth-child(2)" )
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.