Search code examples
javascriptsortablejs

Sortable JS delete item using button click

I'm trying to create a little Sortable JS project where I can clone items from the left side into the right, and can delete items from the right side. I tried creating a button where on click it deletes the parent list item but it's not working properly

I was wondering if someone could look at my codepen (code also below) and see what I'm doing incorrectly? The delete buttons only work sometimes??? [If you delete an item on the right side, once you drag any more in they can no longer be deleted!]

enter image description here

Ideally I'd like to have NO delete button on the left side and only have the ability to delete once its been dragged on the right side but I'm not sure how to implement this.

Please advise, thank you!!

$("#sortable1").sortable({
  connectWith: ".builder-stage",
  helper: function(event, el) {
    copyHelper = el.clone().insertAfter(el);
    return el.clone();
  },
  stop: function() {
    copyHelper && copyHelper.remove();
  }
});
$(".builder-stage").sortable({
  receive: function(event, ui) {
    copyHelper = null;
  }
});

$(".delete").click(function() { 
    $(this).parent().remove();
});
.widgets-panel {
  float: left;
  height: 500px;
  width: 300px;
  border-right: 1px solid #000;
  padding: 15px;
  .rows-widget-list {
    list-style: none;
    padding: 0;
    margin: 0;
    > li {
      display: block;
      padding: 10px 15px;
      border: 1px solid #ddd;
      margin-bottom: 5px;
      background-color: #fff;
    }
  }
  .ui-sortable-placeholder {
  position: absolute;
  }
}
.stage {
  padding: 15px;
  float: left;
  width: calc(100% - 300px);
  .connectedSortable {
    list-style: none;
    padding: 0;
    margin: 0;
    > li {
      display: block;
      padding: 10px 15px;
      border: 1px solid #ddd;
      margin-bottom: 5px;
    }
  }
}
.delete {
  background: none;
  border: 0px;
  color: #888;
  font-size: 15px;
  width: 60px;
  margin: 0px 0 0;
  font-family: Lato, sans-serif;
  cursor: pointer;
  float: right;
}
button:hover {
  color: #CF2323;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.10.1/Sortable.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="pagebuilder clearfix">
  
  <div class="widgets-panel">
    <ul id="sortable1" class="connectedSortable rows-widget-list">
      
      <li class="ib-row row-widget-list-item">
        <select>
          <option value="a">A</option>
          <option value="b">B</option>
          <option value="c">C</option>
          <option value="d">D</option>
        </select>
        <button class="delete">Delete</button>
      </li>
      
      <li class="ib-row row-widget-list-item">
                <select>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
        </select>
        <button class="delete">Delete</button>
      </li>
      
    </ul>
  </div>
  
  <div class="stage">
      <ul id="sortable2" class="builder-stage connectedSortable">
        <li class="ui-state-default">An item
          <button class="delete">Delete</button>
    </li>
      </ul>
  </div>
  

</div>

Solution

  • Instead of:

    $(".delete").click(function() { 
    $(this).parent().remove();
});

    Put:

    $("#sortable2").on('click', '.delete', function() {   
    $(this).parent().remove();
});

    Since you are dynamically dropping html elements you need to dynamically attach events to them.