클래스 중복제거
본문
<div class="apple"></div>
<div class="apple"></div>
<div class="iceBanana banana"></div>
class가 apple이면서 두번째 div 를 제거하려면 어떻게해야할까여?
목표: 같은 class 첫번째 1개 div만 남기고 나머지는 지우고싶습니다.
감사합니다
답변 4
<script>
$(".apple").nextAll(".apple").remove()
</script>
꼭 javascript로 해야 할게 아니라면
<div class="apple"></div>
<div class="apple"></div>
<div class="iceBanana banana"></div>
여기에서 div로 전체를 감싸고,
<div class="wrap">
<div class="apple"></div>
<div class="apple"></div>
<div class="iceBanana banana"></div>
</div>
css로 .wrap div:nth-child(2) {display:none;}
.wrap iceBanana {display:none;} 처리 해도 되요
<style>
.apple { background-color: lightgreen; }
.banana { background-color: lightyellow; }
</style>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script>
$(function () {
// 1. 처음 apple 하나만 남기고 모두 삭제
// $('body :not(.apple:first-child)').remove();
// 2. 각 class 속성 지정기준 처음이 아닌 요소 삭제
var els = {};
$('body *').each(function (idx, el) {
var k = el.className;
if (els[k] == null) {
els[k] = [];
}
if (els[k].length == 0) {
els[k].push(el);
} else {
el.remove();
}
});
});
</script>
<div class="apple">apple 1</div>
<div class="apple">apple 2</div>
<div class="iceBanana banana">iceBanana banana 1</div>
<div class="apple">apple 3</div>
<div class="apple">apple 4</div>
<div class="iceBanana banana">iceBanana banana 2</div>
<div class="iceBanana">iceBanana 1</div>
<div class="banana">banana 1</div>
제거 후 남을 요소
1. 방식
<div class="apple">apple 1</div>
2. 방식
<div class="apple">apple 1</div>
<div class="iceBanana banana">iceBanana banana 1</div>
<div class="iceBanana">iceBanana 1</div>
<div class="banana">banana 1</div>
$('.apple').not(':first').remove();
답변을 작성하시기 전에 로그인 해주세요.
