클릭하면 gif를 추가하고 제거하는 방법은 무엇입니까?

Question

materialize를 사용하여 내 페이지에 아코디언 축소 가능을 만듭니다. 접을 수있는 머리글을 클릭 할 때 gif/이미지를 내 페이지에 추가하고 접을 수있는 머리글을 다시 클릭하거나 다른 머리글을 클릭 할 때이를 제거하려고합니다.

클릭 할 때 GIF를 추가 할 수는 있지만 삭제 방법을 알 수는 없습니다. 나는 자바 스크립트와 jquery를 사용하고있다.

contentTitles = ["Test1", "Test2", "Test3"]; 
contentLinks = ["test1.gif", "test2.gif", "test3.gif"]; 

$(document).ready(function(){ 
    $('.collapsible').collapsible(); 
    $('main').append('<ul data-collapsible="accordion"></ul>'); 
    $('ul').addClass('collapsible popout'); 

for (var j = 0; j < contentTitles.length; j++) { 
    $('ul').append('<li></li>'); 
    // start the creation of the collapsible 
    $('.collapsible').collapsible({ 
     accordion: false, // A setting that changes the collapsible behavior to expandable instead of the default accordion style 
    }); 
    }; 

// create the collapsible 
$('li').append('<div><i></i></div>'); 
$('li').append('<div><span></span></div>'); 
$('i').addClass('material-icons'); 
$('i').parent().addClass("collapsible-header hoverable"); 
$('span').parent().addClass("collapsible-body"); 

// adds the titles to each collapsible header 
$('.collapsible-header').each(function(index) { 
    $(this).html(contentTitles[index]); 
}) 

// adds the gif urls to each collapsible body 
$('.collapsible-header').on('click', function() { 
    $('.collapsible-body').each(function(index) { 
    $(this).html('<iframe class="gif" src=' + contentLinks[index] + '>'); 
    }) 
}) 

$('.collapsible-header').on('click', function() { 
    $('.collapsible-body').html(); 
}) 

}) 
}); 

감사합니다 :

다음은 내 코드입니다.

Answer 1

.html() 호출은 요소의 html 콘텐츠를 반환하기 만하면 변경되지 않습니다. 당신이 요소를 비워하려면 다음을 수행하십시오 나는 그들 중 하나를 볼 수 있어요 전에

$('.collapsible-header').on('click', function() { 
    $('.collapsible-body').html(""); //set HTML to be an empty string 
})