.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>

I don't see where you are doing any removing at all. Are you showing that code here? — Matt Spinks, Feb 02 '17 at 16:35
@Matt Spinks I had the .remove commented out as I experimented with other jquery . options. Post has been edited to reflect .remove. — Inneshfree, Feb 02 '17 at 16:39
you call jquery two times and calls to scripts are above doctype declaration, also you have one extra div in your html. it should be fixed — Jakob, Feb 02 '17 at 16:40
From your script and markup, I can see that all you li have the class `ui-state-default`. You need to use your jquery target the specific li you want to action on. Example is using `$(this)` - It will only action on the clicked li. — Peter, Feb 02 '17 at 16:49
@Peter $(this).remove(); does the same thing. It deletes every li created and not a single instance or parent li. — Inneshfree, Feb 02 '17 at 17:02

Josh Crozier · Accepted Answer · 2017-02-02T16:48:25.487

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 ids 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>

Using href="#" will not allow the jquery function to run. As does using event.preventDefault();. — Inneshfree, Feb 02 '17 at 17:04
I did but when I went to implement it into my main project it was coming up with an issue where the add button wouldn't work. I just rewrote my functions and it is working now. — Inneshfree, Feb 02 '17 at 17:29

score 0 · Answer 2 · answered Feb 02 '17 at 16:37

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>');

I adjusted as you suggested and it still clears out any li created and not a single instance of it. — Inneshfree, Feb 02 '17 at 16:44
@Inneshfree in your HTML, you misspelled `class` you have `` and it needs to be ``. Also I don't see the `class` added to the jquery append line... — Michael Coker, Feb 02 '17 at 16:46
thanks for that catch. I added the class="close" to both locations and still have the same result. — Inneshfree, Feb 02 '17 at 17:06
@Inneshfree you still aren't updating your jquery append line. Change this `$("#sortable").append('

score 0 · Answer 3 · answered Feb 02 '17 at 16:37

0

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)" )

answered Feb 02 '17 at 16:37

Seth McClaine

9,142
6
38
64

I am needing a dynamic method to select a single instance/parent li. Using NTH seems to only delete what I set and won't work if I have 5 li's and only want to delete the 4th while my nth is set to (2). – Inneshfree Feb 02 '17 at 17:05
var elementPlacement = 4; //The element you want to delete $( "ul li:nth-child("+elementPlacement+")"); – Seth McClaine Feb 02 '17 at 21:10

.Remove() removes all div elements

3 Answers3