[英]Remove everything except child
<div class="parent">
<span>sometext</span>
plain text
<input class="child">
</div>
<div class="parent">
<span>sometext</span>
plain text
<input class="child">
</div>
<div class="parent">
<span>sometext</span>
plain text
<input class="child">
</div>
我如何安全地删除.parent
除.child
之外的.child
?
我正在使用此代码(其中items
是.child
的堆栈,而each
都是.child
)
items.each(function(){
$(this).parent().children().each(function(){
if ($(this).hasClass('child'))
// do something
else
$(this).remove();
});
$(this).unwrap(); // remove parent, keep only .child
});
但是它不处理纯文本。
你说过
.child
内可以有多个.parent
,我们只保留第一个。 因此,如果有三个,则应删除第二个和第三个。
然后
items
是.child
的堆栈,每个都是.child
好的,这就是我要做的:
items.parent('.parent').each(function() {
var parent = $(this),
child = parent.children('.child').first();
child.detach();
parent.empty().append(child);
});
那是什么:
从该组动作.child
元素达到设定的.parent
元素。 结果集将只有唯一的父母。
遍历父母。
获取每个父.child
中的第一个 .child
并将其分离。
清空.parent
。
重新附加.child
。
最终结果是,每个.parent
将只有一个.child
(没有其他孩子,无论是否为.child
)。
在这里,您将获得使用纯JS的解决方案: 小提琴
因此,在循环中,您可以使用以下代码:
this.parentNode.innerHTML = this.outerHTML;
如果您必须保留附加的事件处理程序:
var _this = this.cloneNode(true),
parent = this.parentNode;
parent.innerHTML = '';
parent.appendChild(_this);
这样的事情会做到的;
$('.parent').on('click', '.child', function(e) {
var $this = $(this),
$parent = $this.parent(),
$children = $parent.find('.child'); // or: $this.siblings('.child');
$parent
.empty() // Empty the "parent" element
.append($children); // Re-append all "child" element to "parent"
$this.focus(); // Focus the (input) element
});
这是使用正则表达式的替代方法:
$('.parent').each(function() {
$(this).html($(this).html().match("<input class=.child.>"));
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.