从jquery排序表中删除div

我已经为我的内部网开发了一个“类似谷歌地图”的用户界面，用户可以在其中为计算出的路线和距离添加步骤。我正在使用sortable

div

s对步骤进行重新排序。现在我想删除这些步骤，但我的JavaScript/jQuery代码根本不起作用。你能帮我吗

我的jQuery代码：

$(document).ready(function() {
        $("#sortable").sortable();
        $("#sortable").disableSelection();
});



    function addStep() {
        var temp = $('.template').clone();
        $(temp).removeClass("template");
        $(temp).addClass("sort");
        $('#sortable').append(temp);

    }
    function removeStep() {

        $(this).closest('div.sort').remove();
        $("#sortable").sortable('refresh');
    }

和我的HTML：

//template to add new step
 <div class="template">
        <input type="text" name="addressN" value="" class="address" />
        <input type="button" class="remove" value="Remove" onclick="removeStep();" />
    </div>
//sortable list of step
    <div id="sortable">
        <div class="sort">
            <input type="text" name="Start" value="" class="address" />
        </div>
        <div class="sort">
            <input type="text" name="End" value="" class="address" />
        </div>
    </div>
    <input type="submit" value="Get Route!" onclick="showLocation(); return false;" />
    <input type="submit" value="Add Step" onclick="addStep(); return false;" />

//添加新步骤的模板
//步骤的可排序列表

---

提前谢谢

您的

addStep（）

函数有问题。我将尝试通过在原始代码中添加一些注释来解释：

function addStep() {
 // Here, you store a reference to the jQuery Object containing the clone in the var temp.
 var temp = $('.template').clone();
 // Here, you wrap temp (which already is a jQuery Object) inside $().
 // Fix: replace '$(temp)' by 'temp'
 $(temp).removeClass('template');
 $(temp).addClass('sort');
 $('#sortable').append(temp);
}

修复此问题后，再加上一些额外的优化，这将成为：

function addStep() {
 $('.template').clone().removeClass('template').addClass('sort').appendTo('#sortable');
}

---

另外，您的

removeStep（）

函数不正确地使用了

此

。您可能需要执行以下操作：

$.fn.removeStep = function() {
 // `this` is now a reference to the jQuery Object on which `.removeStep()` was invoked 
 this.closest('div.sort').remove();
 $('#sortable').sortable('refresh');
 // Allow chaining
 return this;
}

现在，您可以从HTML模板中省略

onclick=“removeStep（）；”

，并在jQuery中使用如下内容：

$('.remove').live('click', function() {
 $(this).removeStep();
}

---

嗨，马西亚斯！非常感谢您的修复！我正在努力，只要顾客停止给我打电话，该死的星期一早上！感谢您上了关于“this”对象的jquery小课，它非常清晰且有用！还有一个问题：美元是多少。？你能告诉我脚本部分的样子吗？我有点糊涂了！非常感谢。只需将

$.fn

东西放在

$（document）.ready（function（）{}

块的顶部。通过使用

$.fn

，我们可以向jQuery对象添加新的函数和特性。基本上，我所做的就是在那里创建一个小的jQuery插件。