使用 jquery 删除元素

Question

我在我的程序中使用 jquery 令牌输入，根据选择列表更改，我需要将额外参数传递给搜索函数。我可以通过下面的代码来做到这一点。

$("#service").on('change', '.act_type', function () {  
qq = $(this).val();
var id = $(this).attr('id').split('-');
$("#token-input-code-" + id[1]).detach();
$("#code-"+id[1]).tokenInput("../Preapproval/Searchactivitycode?queryParam=q" + "&type=" + qq,{
theme: 'facebook',
preventDuplicates: true,
searchingText: 'Searching...',
tokenLimit: 1,
hintText: 'Activity code',
 });

行是动态创建的。我将在完成“选择”列表的更改时，请分离当前文本框，该文本输入已完成更改。否则，将通过保留旧文本框来创建一个新文本框。现在它正在分离旧的并创建一个具有相同 id 和 tokeninput 的新。搜索也成功。但我面临一个问题。

令牌输入$("#token-input-code-" + id[1]) 位于<ul><li></li></ul 之下，并且此 li 和 ul 没有被删除，因此每次我在选择列表中进行更改时，行顶部都会出现一条小线。 我怎样才能删除 ul 和 li。它没有 id 只有一个类，并且同一个类也用于表单中的另一个 ul 元素。

Answer 1

试试：

$('ul:has(li:empty)').filter(function() { 
    return $(this).children().length === 1; 
}).remove();

DEMO

Answer 2

使用jquery的unwrap()

    var el = $('div[id^="token-input-code"]');
        el.parent('li').unwrap();
        el.parent('ul').unwrap();

Answer 3

您可以使用这样的函数分离父元素：

function detachInput(id) {
    var li = $('#' + id).closest('li');
    if (li.siblings().length === 0) {
        li.closest('ul').detach();
    } else {
        li.detach();
    }
}

这假定ul 元素可以包含多个li 元素，并且您只想在ul 为空时删除它。

像这样调用它：

detachInput("token-input-code-" + id[1]);

你应该考虑你是真的想detach还是真的remove。