ボタンを押したら右ボタンを押したら水色の要素が消え、黄緑の要素の左側に出るようにしたいのですが、どのようにすれば良いかわかりません。

htlm

html
1<div class="wibthList">
2        <img src="http://placehold.it/300x150/0f0/">
3        <img src="http://placehold.it/300x150/00f/">
4        <img src="http://placehold.it/300x150/0ff/">
5  </div>
6
7  <input type="button" value="<" onclick="LeftButtonClick();" />
8  <input type="button" value=">" onclick="RightButtonClick();" />

javascript

Javascript
1function RightButtonClick(){
2
3$('.wibthList img').last().remove();
4
5
6}
7
8function LeftButtonClick(){
9
10  $('.wibthList img').first().remove();
11
12
13}
14

試したこと

div要素の子要素であるimg要素を取得して、last()関数とfirst()関数で最初と最後を取得し削除することはできたのですが、挿入しようとするとエラーになります。

お力をお貸しください！

行動規範の内容に同意します

回答3件

他の方が挙げている方法以外にも、detachメソッドを利用することでも実現できます。

HTML
1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6</head>
7<body>
8<div class="wibthList">
9    <img src="http://placehold.it/300x150/0f0/">
10    <img src="http://placehold.it/300x150/00f/">
11    <img src="http://placehold.it/300x150/0ff/">
12</div>
13<input type="button" value="<" onclick="LeftButtonClick();">
14<input type="button" value=">" onclick="RightButtonClick();">
15<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
16<script>
17    function RightButtonClick() {
18        var lastImage = $('.wibthList img').last().detach();
19        $(".wibthList").prepend(lastImage);
20    }
21
22    function LeftButtonClick() {
23        var firstImage = $('.wibthList img').first().detach();
24        $(".wibthList").append(firstImage);
25    }
26</script>
27</body>
28</html>

投稿2017/05/29 12:11

s8_chu

総合スコア14731

jQuery入ってるんですよね？
でしたら、

function RightButtonClick(){
  $('.wibthList').prepend($('.wibthList img').last())
}

function LeftButtonClick(){
  $('.wibthList').append($('.wibthList img').first())
}

でどうでしょう？

removeで削除するのではなく、domを移動させてあげるというかんじです。

投稿2017/05/29 11:57

編集2017/05/29 12:01

h_daido

総合スコア824

JavaScript
1function RightButtonClick(){
2  var list = $("div.wibthList");
3  list.children("img").last().prependTo(list);
4}
5

投稿2017/05/29 12:05

編集2017/05/29 12:10

root_jp

総合スコア4666

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

jsで子要素の一番後ろの要素を削除して、要素の一番最初に挿入するには？

htlm

javascript

試したこと

関連した質問