티스토리 뷰

jQuery

[jQuery] .removeAttr()

.removeAttr()

선택한 HTML 요소에서 하나 이상의 속성을 제거합니다.


.removeAttr()

선택한 HTML 요소에서 하나 이상의 속성을 제거합니다.

문법

$("선택자").removeAttr("속성");

정의

  • .removeAttr() 메서드는 선택한 요소의 속성 값을 삭제합니다.

샘플(Sample)

요소의 속성 값을 하나씩 제거하는 예제입니다.

jquery
$(".list1 .desc").text( $(".list1 img").removeAttr("src") );
$(".list1 .desc").text( $(".list1 img").removeAttr("alt") );
$(".list1 .desc").text( $(".list1 img").removeAttr("width") );
html
<h3>속성(Attributes)</h3>
<div class="list1">
    <ul class="listNo">
        <li><img src="https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover01.jpg" alt="img1" width="150" /></li>
    </ul>
    <p class="desc"></p>
</div>
Total
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>jQuery Sample</title>
    <style>
        li {list-style: none;}
        a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none;}
</style>
</head>
<body>
   
    <h3>속성(Attributes)</h3>
    <div class="list1">
        <ul class="listNo">
            <li><img src="https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover01.jpg" alt="img1" width="150" /></li>
        </ul>
        <p class="desc"></p>
    </div>
    
    <div class="choice1">
        <a href="#" class="off1">리셋</a>
        <a href="#" class="btn1">클릭하면 이미지의 <em>src</em> 속성 값을 지웁니다.</a>
        <a href="#" class="btn2">클릭하면 이미지의 <em>alt</em> 속성 값을 지웁니다.</a>
        <a href="#" class="btn3">클릭하면 이미지의 <em>width</em> 속성 값을 지웁니다.</a>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(".list1 .desc").text("이미지 src값 : "+$(".list1 img").attr("src") + " / " + "이미지 alt값 : "+$(".list1 img").attr("alt") + " / " + "이미지 width값 : "+$(".list1 img").attr("width"));
        $(".choice1 .off1").on("click", function(e){
            e.preventDefault();
            $(".list1 img").attr({"src":"https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover01.jpg","alt":"img1","width":"150"});
            $(".list1 .desc").text("이미지 src값 : "+$(".list1 img").attr("src") + " / " + "이미지 alt값 : "+$(".list1 img").attr("alt") + " / " + "이미지 width값 : "+$(".list1 img").attr("width"));
        });
        $(".choice1 .btn1").on("click", function(e){
            e.preventDefault();
            $(".list1 .desc").text( $(".list1 img").removeAttr("src") );
            $(".list1 .desc").text("이미지 src값 : "+$(".list1 img").attr("src") + " / " + "이미지 alt값 : "+$(".list1 img").attr("alt") + " / " + "이미지 width값 : "+$(".list1 img").attr("width"));
        });
        $(".choice1 .btn2").on("click", function(e){
            e.preventDefault();
            $(".list1 .desc").text( $(".list1 img").removeAttr("alt") );
            $(".list1 .desc").text("이미지 src값 : "+$(".list1 img").attr("src") + " / " + "이미지 alt값 : "+$(".list1 img").attr("alt") + " / " + "이미지 width값 : "+$(".list1 img").attr("width"));
        });
        $(".choice1 .btn3").on("click", function(e){
            e.preventDefault();
            $(".list1 .desc").text( $(".list1 img").removeAttr("width") );
            $(".list1 .desc").text("이미지 src값 : "+$(".list1 img").attr("src") + " / " + "이미지 alt값 : "+$(".list1 img").attr("alt") + " / " + "이미지 width값 : "+$(".list1 img").attr("width"));
        });
</script>


</body>
</html>

공유하기(Share) 더보기

  • 네이버 블러그 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 트위터 공유하기
  • 트위터 공유하기

공감하기(Like) 더보기

태그(Tag) 더보기

질문하기(Questions)
댓글쓰기 폼