使用 jquery 删除元素

Question

我在我的程序中使用 jquery 令牌输入，根据 select 列表更改，我需要将额外参数传递给搜索功能。我可以通过下面的代码来完成。

$("#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',
 });

行正在动态创建。 select 列表中的更改完成后，我将分离具有令牌输入的当前文本框。否则，将通过保留旧文本框来创建新文本框。现在它正在分离旧的并创建一个具有相同 id 和 tokeninput 的新的。搜索也成功了。但我面临一个问题。

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

Answer 1

您可以使用如下函数分离父元素：

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 or actually remove。

Answer 2

使用jquery的unwrap()

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

Answer 3

尝试：

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

DEMO

使用 jquery 删除元素

Removing element using jquery

html

asp.net-mvc

jquery

asp.net-mvc-3