테스트 사이트 - 개발 중인 베타 버전입니다

클래스 중복제거 채택완료

ljy0318b 2년 전 조회 2,895

<div class="apple"></div>

<div class="apple"></div>

<div class="iceBanana banana"></div>

 

class가 apple이면서 두번째 div 를 제거하려면 어떻게해야할까여?

 

목표: 같은 class 첫번째 1개 div만 남기고 나머지는 지우고싶습니다.

 

감사합니다

댓글을 작성하려면 로그인이 필요합니다.

답변 4개

채택된 답변
+20 포인트
m
2년 전

</p>

<p><script></p>

<p>$(".apple").nextAll(".apple").remove()</p>

<p></script></p>

<p>

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

2년 전

$('.apple').not(':first').remove();

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

2년 전

</p>

<p><style>

.apple { background-color: lightgreen; }

.banana { background-color: lightyellow; }

</style></p>

<p><script src="<a href="http://code.jquery.com/jquery.min.js"></script>" target="_blank" rel="noopener noreferrer">http://code.jquery.com/jquery.min.js"></script></a>

<script>

$(function () {

    // 1. 처음 apple 하나만 남기고 모두 삭제

    // $('body :not(.apple:first-child)').remove();</p>

<p> </p>

<p>    // 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></p>

<p><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></p>

<p>

 

제거 후 남을 요소

 

1. 방식

</p>

<p><div class="apple">apple 1</div></p>

<p>

 

2. 방식

</p>

<p><div class="apple">apple 1</div></p>

<p><div class="iceBanana banana">iceBanana banana 1</div></p>

<p><div class="iceBanana">iceBanana 1</div></p>

<p><div class="banana">banana 1</div></p>

<p>

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

2년 전

꼭 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;} 처리 해도 되요

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인