特定の要素の後ろにDOM要素を追加して$.ajaxで外部htmlを読み込んだり削除したい

Question

やりたいことは特定のリンクをクリックするとそのクリックした要素の後ろに.afterなどを使ってDOM要素を作成し、そこにajaxで別ファイルのHTMLを読み込みしたいです。

下記のリンクを参考に作成しましたがうまくいきません。
クリックをトリガーに--ajaxで外部htmlを読み込んだり削除したりする
別のページをjqueryのajaxを使って読み込み表示させる

・問題点：
クリックした要素以外に追加したDOM要素を削除したいのですがうまくいかず、すべてのリンクの後にDOM要素が追加されてしまいます。

色々試してはみましたがうまくいかず困っています。。
すいませんがご教授いただければ幸いです。
どうぞよろしくお願いいたします。

<div class="gnavi">
    <div class="item"><a href="modal_A.html">1のページ</a></div>
    <div class="item"><a href="modal_B.html">2のページ</a></div>
    <div class="item"><a href="modal_C.html">3のページ</a></div>
</div>

$(function(){
    $(document).on('click', '.item a', function(event) {
       event.preventDefault();
        var link = $(this).attr("href");  
        $content = $('.pageDisplay');
		//リンク先が今と同じであれば遷移しない
		if(link == lastpage){
			return false;
		}else{
         if (!$(this).next('.pageDisplay').length>0){
            $(this).after("<div class=\"pageDisplay\"></div>"); 
                }
 			$content.fadeOut(300, function() {
				 $.ajax({
                type: 'GET',
                url: link,
                dataType: 'html',
                success: function(data){
                    $('.pageDisplay').html(data).fadeIn(300);
                    modalClose();
                },
                error:function() {
                           alert('問題がありました。');
                       }
            });
			});
			//今のリンク先を保存
			lastpage = link;
		}
 		
	});
	//初期設定
	var lastpage = "";
    
    function modalClose() {
      $(".js-modal_close").click(function() {
        $content.fadeOut(300);
      });
    };

});

Comments

[x_x]

最終的に1回のクリックで3回のリクエストが飛ぶようになりますが、これは想定通りなのでしょうか？

[srecna]

ご回答ありがとうございます。すいません、それは私の記述ミスです。そこが間違ってるんですね…一回のクリックで一回のリクエストを飛ばしたいです。

[x_x]

アンカーをクリックして実際にリンク先に遷移してしまうのでしょうか？

[srecna]

いいえ、実際にリンク先には遷移しません。ajaxを読み込むために使いたいです。

Answer 1

こんな感じでしょうか

$(function(){
    $(document).on('click', '.item a', function(event) {
        event.preventDefault();
        var link = $(this).prop("href");
        if(link == lastpage){
            return false;
        }else{
            $('.pageDisplay .js-modal_close').trigger('click');
            $.ajax({
                type: 'GET',
                url: link,
                dataType: 'html',
                success: function(data){
                    var $content = $('<div class="pageDisplay" style="display:none;"></div>').html(data);
                    $(event.currentTarget).after($content); 
                    $content.fadeIn(300);
                    modalClose($content);
                },
                error:function() {
                    alert('問題がありました。');
                }
            });

            //今のリンク先を保存
            lastpage = link;
        }

    });

    //初期設定
    var lastpage = "";

    function modalClose(context) {
        $(".js-modal_close", context).one('click', function() {
            $(this).closest('.pageDisplay').fadeOut(300, function() {
                $(this).off().remove();
            });
        });
    };
});

Comments

[srecna]

時間差で回答おくれましてすいません！ありがとうございます。こちらも思った動きでした。じっくり拝見させていただき、何が悪かったのか勉強させていただきたく存じます。どうもありがとうございました。

Answer 2

<div class="gnavi">

<div class="item"><a href="modal_A.html">1のページ</a></div>
<div class="item"><a href="modal_B.html">2のページ</a></div>
<div class="item"><a href="modal_C.html">3のページ</a></div>

</div>

この場合「1のページ」をクリックすると

<div class="gnavi">
    <div class="item"><a href="modal_A.html">1のページ</a></div>
    <div id="contents">（modal_A.htmlの内容）</div>
</div>

のようになるということでしょうか？

sample

<script>
$(function(){
  $('.item a').on('click',function(e){
    e.preventDefault();
    $.ajax({
    url:$(this).attr('href'),
    dataType:'html',
    }).done(function(html){
      $(e.target).after($('<div id="contents">').append(html)).closest('.item').siblings().remove();
    });
  });
});
</script>
<div class="gnavi">
    <div class="item"><a href="modal_A.html">1のページ</a></div>
    <div class="item"><a href="modal_B.html">2のページ</a></div>
    <div class="item"><a href="modal_C.html">3のページ</a></div>
</div>

調整版

.itemは消さない。付け足した#contentsは削除

$(function(){
  $('.item a').on('click',function(e){
    e.preventDefault();
    if($(this).closest('.item').next().filter('#contents').length>0){
      $('#contents').remove();
    }else{
      $.ajax({
      url:$(this).attr('href'),
      dataType:'html',
      }).done(function(html){
        $('#contents').remove();
        $(e.target).closest('.item').after($('<div id="contents">').append(html));
      });
    }
  });
});

Comments

[srecna]

はいその通りです、わかりづらくて申し訳ありません。

[yambejp]

sampleあげておきました
読み込む各ページに余計なデータや競合する情報がはいってない前提です

[srecna]

ご回答ありがとうございます！早速試してみましたが削除の対象は作成した要素（この場合は<div id="contents">）で他のリンク要素（<div class="item">）は表示させておきたいです。あと書き忘れて申し訳ないですがもう一度リンクをクリックしたら閉じるようにしたいです。

[yambejp]

ご提示の仕様に合わせてみました。違うようなら再度ご指摘下さい

[srecna]

早速ありがとうございます。まさに思った通りの動きです！本当に助かりました。ありがとうございました。