Форум программистов, компьютерный форум, киберфорум
Наши страницы

jQuery

Войти
Регистрация
Восстановить пароль
 
 
Рейтинг: Рейтинг темы: голосов - 14, средняя оценка - 4.71
PinkPink
9 / 9 / 2
Регистрация: 10.05.2012
Сообщений: 288
#1

Удалить элемент - jQuery

14.01.2014, 22:04. Просмотров 2813. Ответов 44
Метки нет (Все метки)

Вечер добрый, подскажи пожалуйста, почему не работает такой код?
Ещё я не очень поняла, почему у меня не получается работать с $(this). Нет никаких методов для этого объекта, получить tagName и другие параметры тоже не удаётся. Как это делается?

Суть метода: элемент, на который кликнули, удалить из родительского элемента.
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript">
 
            $(document).ready(function () {
 
                $("input[type='checkbox'").click(function () {
 
                    var $elem = $(this)
                    var $table = $(this).parent('table');
                    $table.removeChild($elem);
 
                });
 
            });
 
        </script>
Добавлено через 10 минут
Вообще, конечно, тут возможно проблема в том, что $(this) не DOM элемент, поэтому дальнейшая обработка не верная.
Но у меня есть лишь одна идея - получить id у $(this) и потом уже DOM-объект document.getElementsById
только я не знаю как получить id из $(this).
Такая запись alert( $(this).id) выводит 'undefined'. Да и несколько непонятно, почему после $(this). в принципе нет никаких подсказок с методами и свойствами
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
14.01.2014, 22:04
Я подобрал для вас темы с готовыми решениями и ответами на вопрос Удалить элемент (jQuery):

С соседнего <tr> удалить элемент - jQuery
Всем здрасте, каким образом можно распознать и удалить input с соседнего ( их ) &lt;tr&gt;&lt;/tr&gt; ? &lt;tr&gt; &lt;td...

Удалить элемент из ListView asp.net - jQuery
Есть на странице ListView вывожу в него данные: как с помощью JQUERY удалить один Item из ListView на странице. пытаюсь удалить так:...

удалить элемент страницы - JavaScript
на сайте выводится динамически несколько разделителей hr, но один лишний, у меня есть такой код, но он не работает: &lt;script...

Удалить элемент по индексу - JavaScript
Всем привет! Не могу понять, как правильно сделать у меня 2 таблицы, по клику на кнопочку я скрываю td и во второй таблице...

Удалить элемент массива по ключу - JavaScript
Всем привет. Пробую писать на чистом js, фух не думал что с такими мелочами будет так трудно) Задача: Есть массив объектов: var q = ...

Удалить, заменить целый элемент - JavaScript
Подскажите пожалуйста. Есть переменная name, которая содержит имя файла + содержит блок, элемент в теге span. Как можно было бы удалить...

44
PinkPink
9 / 9 / 2
Регистрация: 10.05.2012
Сообщений: 288
15.01.2014, 01:05  [ТС] #31
Цитата Сообщение от vovandr Посмотреть сообщение
Javascript
1
2
3
if($('tbody','#firsttable').length > 0){$('tbody','#firsttable').append(tds);
                    }else {$('#firsttable').append(tds);}
                    });
ну вообщем, поменяла как вы сказали, однако первый метод лучше работать не стал, всё по той же причине.
я даже полностью закоментировала второй метод на всякий случай, но это не помогло.
0
vovandr
629 / 517 / 139
Регистрация: 19.08.2013
Сообщений: 1,399
15.01.2014, 01:08 #32
мне тяжело сказать, что там происходит. Ошибок в коде вроде сейчас я не вижу, почему не работает сложно сказать, надо в реале смотреть на примере, если сможете залейте на jsfidle или codepen и все станет ясно, почему не работает
0
PinkPink
9 / 9 / 2
Регистрация: 10.05.2012
Сообщений: 288
15.01.2014, 01:15  [ТС] #33
Цитата Сообщение от vovandr Посмотреть сообщение
мне тяжело сказать, что там происходит. Ошибок в коде вроде сейчас я не вижу, почему не работает сложно сказать, надо в реале смотреть на примере, если сможете залейте на jsfidle или codepen и все станет ясно, почему не работает
http://pastebin.com/gXYxTsPE
не подойдёт?
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
@{ Layout = "~/_MasterLayout.cshtml"; }
<!DOCTYPE html>
 
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
        <script type="text/javascript">
 
            $(document).ready(function () {
 
                $("input[type='checkbox']").click(function () {
 
                    var tr = $(this).parents('tr').remove();
                    var tableId = $(this).parents('table').attr('id');
                    if (tableId == 'firsttable') {
                        $('#secondtable tbody').append(tr);
                    } else {
                        $('#firsttable tbody').append(tr);
                        $("#firsttable .del").remove();
                    }
 
 
                });
 
                $("#input_button").click(function () {
                    var $str = $('#input_text').val()
                    $('#input_text').val(' ')
                    //  document.getElementById('firsttable').innerHTML += '<tr><td><input type="checkbox" id ="'+$str+'"></td><td><p>'+$str+'</p></td><td class="del"><input type="button" id="input_button" value="X"></td></tr>'
                    var tds = '<tr><td><input type="checkbox" id ="' + $str + '" name=""></td><td><p>' + $str + '</p></td></tr>'
                    if ($('tbody', '#firsttable').length > 0) {
                        $('tbody', '#firsttable').append(tds);
                    } else { $('#firsttable').append(tds); }
                });
 
                $('.del').click(function () {
                    $(this).parents('tr').remove();
                });
            });
 
        </script>
    </head>
    <body>
        
        <input type="text" id="input_text">
        <input type="button" id="input_button" value="Добавить">
        <p>Нужно сделать</p>
        <table id="firsttable">
            <tr id="check1"><td>@Html.CheckBox("Chek1",false)</td><td><p>Повторить теорию</p></td></tr>
            <tr><td>@Html.CheckBox("Chek2",false)</td><td><p>Сдать экзамен</p></td></tr>
            <tr><td>@Html.CheckBox("Chek3",false)</td><td><p>Купить торт</p></td></tr>
        </table>
        <p>Сделано</p>
        <table id="secondtable">
            <tr id="check1"><td>@Html.CheckBox("Chek4",true)</td><td><p>Весело провести новый год, Рождество</p></td><td></td><td class="del"><input type="button" id="input_button" value="X"></td></tr>
        </table>
 
    </body>
</html>
0
vovandr
629 / 517 / 139
Регистрация: 19.08.2013
Сообщений: 1,399
15.01.2014, 01:16 #34
нет нужен html уже отрисованный...
0
PinkPink
9 / 9 / 2
Регистрация: 10.05.2012
Сообщений: 288
15.01.2014, 01:21  [ТС] #35
Цитата Сообщение от vovandr Посмотреть сообщение
нет нужен html уже отрисованный...
а вон как. ну щас попробую сделать.

Добавлено через 2 минуты
Блин, что-то у меня какая-то ерунда получается
0
vovandr
629 / 517 / 139
Регистрация: 19.08.2013
Сообщений: 1,399
15.01.2014, 01:24 #36
через средства разработчика скопируйте ваш код с локальной версии уже после обработки сервера
0
PinkPink
9 / 9 / 2
Регистрация: 10.05.2012
Сообщений: 288
15.01.2014, 01:27  [ТС] #37
Цитата Сообщение от vovandr Посмотреть сообщение
через средства разработчика скопируйте ваш код с локальной версии уже после обработки сервера
http://codepen.io/anon/pen/rmbDg
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
            $(document).ready(function () {
 
                $("input[type='checkbox']").click(function () {
 
                    var tr = $(this).parents('tr').remove();
                    var tableId = $($(this).parents('table')).attr('id');
                    if (tableId == 'firsttable') {
                        $('#secondtable tbody').append(tr);
                    } else {
                        $('#firsttable tbody').append(tr);
                        $("#firsttable .del").remove();
                    }
 
 
                });
 
                $("#input_button").click(function () {
                    var $str = $('#input_text').val()
                    $('#input_text').val(' ')
                    //  document.getElementById('firsttable').innerHTML += '<tr><td><input type="checkbox" id ="'+$str+'"></td><td><p>'+$str+'</p></td><td class="del"><input type="button" id="input_button" value="X"></td></tr>'
                    var tds = '<tr><td><input type="checkbox" id ="' + $str + '" name=""></td><td><p>' + $str + '</p></td></tr>'
                    if ($('tbody', '#firsttable').length > 0) {
                        $('tbody', '#firsttable').append(tds);
                    } else { $('#firsttable').append(tds); }
                });
 
                $('.del').click(function () {
                    $(this).parents('tr').remove();
                });
            });
HTML+CSS
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
@{ Layout = "~/_MasterLayout.cshtml"; }
<!DOCTYPE html>
 
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
        <script type="text/javascript">
 
            $(document).ready(function () {
 
                $("input[type='checkbox']").click(function () {
 
                    var tr = $(this).parents('tr').remove();
                    var tableId = $(this).parents('table').attr('id');
                    if (tableId == 'firsttable') {
                        $('#secondtable tbody').append(tr);
                    } else {
                        $('#firsttable tbody').append(tr);
                        $("#firsttable .del").remove();
                    }
 
 
                });
 
                $("#input_button").click(function () {
                    var $str = $('#input_text').val()
                    $('#input_text').val(' ')
                    //  document.getElementById('firsttable').innerHTML += '<tr><td><input type="checkbox" id ="'+$str+'"></td><td><p>'+$str+'</p></td><td class="del"><input type="button" id="input_button" value="X"></td></tr>'
                    var tds = '<tr><td><input type="checkbox" id ="' + $str + '" name=""></td><td><p>' + $str + '</p></td></tr>'
                    if ($('tbody', '#firsttable').length > 0) {
                        $('tbody', '#firsttable').append(tds);
                    } else { $('#firsttable').append(tds); }
                });
 
                $('.del').click(function () {
                    $(this).parents('tr').remove();
                });
            });
 
        </script>
    </head>
    <body>
        
        <input type="text" id="input_text">
        <input type="button" id="input_button" value="Добавить">
        <p>Нужно сделать</p>
        <table id="firsttable">
            <tr id="check1"><td>@Html.CheckBox("Chek1",false)</td><td><p>Повторить теорию</p></td></tr>
            <tr><td>@Html.CheckBox("Chek2",false)</td><td><p>Сдать экзамен</p></td></tr>
            <tr><td>@Html.CheckBox("Chek3",false)</td><td><p>Купить торт</p></td></tr>
        </table>
        <p>Сделано</p>
        <table id="secondtable">
            <tr id="check1"><td>@Html.CheckBox("Chek4",true)</td><td><p>Весело провести новый год, Рождество</p></td><td></td><td class="del"><input type="button" id="input_button" value="X"></td></tr>
        </table>
 
    </body>
</html>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
body {
}
 
 
.main_div
{
     border: solid;
                border-color: black;
                border-width: 1px;
                min-height: 100%;
}
 
.center_section
{
                border: solid;
                border-color: black;
                border-width: 1px;
                width: 600px;  
                margin: 5px auto 5px auto;
                height: 440px;
}
 
.section_right
{
    border: solid;
    border-color: black;
    border-width: 1px;
    float: right;
}
.section_left
{
    border: solid;
    border-color: black;
    border-width: 1px;
    float:left;
}
header, footer
{
     border: solid;
    border-color: black;
    border-width: 1px;
    height: 100px;
    background-color:black;
    color: #fff;
}
header h1
{
    margin: 30px auto auto auto;
    width: 170px;
}
 
footer p
{
      margin: 40px auto auto auto;
    width: 200px;
}
 
.center_section p
{
    border-bottom: dotted;
    border-bottom-color: Black;
    border-bottom-width: 1px;
}
0
vovandr
629 / 517 / 139
Регистрация: 19.08.2013
Сообщений: 1,399
15.01.2014, 01:35 #38
ага, замечательно, теперь при клике на что и что должно произойти?
0
PinkPink
9 / 9 / 2
Регистрация: 10.05.2012
Сообщений: 288
15.01.2014, 01:37  [ТС] #39
Цитата Сообщение от vovandr Посмотреть сообщение
ага, замечательно, теперь при клике на что и что должно произойти?
В первой табличке кликаем на чекбокс - переносится во вторую табличку.
Во второй кликаем - переносится в первую.

+

Есть функционал добавления записи. И удаления - клик на крестике напротив записи во второй таблице
0
vovandr
629 / 517 / 139
Регистрация: 19.08.2013
Сообщений: 1,399
15.01.2014, 01:46 #40
http://codepen.io/anon/pen/zwKmF
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
            $(document).ready(function () {
 
                $("input[type='checkbox']").live('click',function () {
 
                    var tableId = $(this).parents('table').attr('id');
                    var tr = $(this).parents('tr').detach();
                   
                    if (tableId == 'firsttable') {
                        $('#secondtable tbody').append(tr);
                    } else {
                        $('#firsttable tbody').append(tr);
                        $("#firsttable .del").remove();
                    }
 
  
                });
 
                $("#input_button").click(function () {
                    var $str = $('#input_text').val()
                    $('#input_text').val(' ')
                    //  document.getElementById('firsttable').innerHTML += '<tr><td><input type="checkbox" id ="'+$str+'"></td><td><p>'+$str+'</p></td><td class="del"><input type="button" id="input_button" value="X"></td></tr>'
                    var tds = '<tr><td><input type="checkbox" id ="' + $str + '" name=""></td><td><p>' + $str + '</p></td></tr>'
                    if ($('tbody', '#firsttable').length > 0) {
                        $('tbody', '#firsttable').append(tds);
                    } else { $('#firsttable').append(tds); }
                });
 
                $('.del').click(function () {
                    $(this).parents('tr').remove();
                });
            });
HTML+CSS
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
                   
 
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
       
    </head>
    <body>
        
        <input type="text" id="input_text">
        <input type="button" id="input_button" value="Добавить">
        <p>Нужно сделать</p>
        <table id="firsttable">
            <tr id="check1"><td><input id="Chek1" name="Chek1" type="checkbox" /></td><td><p>Повторить теорию</p></td></tr>
            <tr><td><input id="Chek2" name="Chek2" type="checkbox" /></td><td><p>Сдать экзамен</p></td></tr>
            <tr><td><input id="Chek3" name="Chek3" type="checkbox" /></td><td><p>Купить торт</p></td></tr>
        </table>
        <p>Сделано</p>
        <table id="secondtable">
            <tr id="check1"><td><input checked="checked" id="Chek4" name="Chek4" type="checkbox" /></td><td><p>Весело провести новый год, Рождество</p></td><td></td><td class="del"><input type="button" id="input_button" value="X"></td></tr>
        </table>
 
    </body>
</html>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
body {
}
 
 
.main_div
{
     border: solid;
                border-color: black;
                border-width: 1px;
                min-height: 100%;
}
 
.center_section
{
                border: solid;
                border-color: black;
                border-width: 1px;
                width: 600px;  
                margin: 5px auto 5px auto;
                height: 440px;
}
 
.section_right
{
    border: solid;
    border-color: black;
    border-width: 1px;
    float: right;
}
.section_left
{
    border: solid;
    border-color: black;
    border-width: 1px;
    float:left;
}
header, footer
{
     border: solid;
    border-color: black;
    border-width: 1px;
    height: 100px;
    background-color:black;
    color: #fff;
}
header h1
{
    margin: 30px auto auto auto;
    width: 170px;
}
 
footer p
{
      margin: 40px auto auto auto;
    width: 200px;
}
 
.center_section p
{
    border-bottom: dotted;
    border-bottom-color: Black;
    border-bottom-width: 1px;
}
0
PinkPink
9 / 9 / 2
Регистрация: 10.05.2012
Сообщений: 288
15.01.2014, 01:48  [ТС] #41
Цитата Сообщение от vovandr Посмотреть сообщение
о, да не может быть! в чём же был косяк???
почему так через live и detach() ?
0
vovandr
629 / 517 / 139
Регистрация: 19.08.2013
Сообщений: 1,399
15.01.2014, 01:54 #42
потому что вы кнопкой добавляете новые элементы, которые до этого в объектной модели документа не были. detach я использовал для отладки, можете и с remove попробовать впринципе должно работать тоже
1
PinkPink
9 / 9 / 2
Регистрация: 10.05.2012
Сообщений: 288
15.01.2014, 02:10  [ТС] #43
Цитата Сообщение от vovandr Посмотреть сообщение
потому что вы кнопкой добавляете новые элементы, которые до этого в объектной модели документа не были. detach я использовал для отладки, можете и с remove попробовать впринципе должно работать тоже
Огромное вам спасибо! Я уверена, что без вашей помощи не разобралась бы. Правда и сейчас не очень понимаю, почему айдишники не определялись, ведь таблицы существовали и до этого.
Скажите, как вы изучали этот язык, хочу это понимать.

Добавлено через 13 минут
Цитата Сообщение от PinkPink Посмотреть сообщение
Огромное вам спасибо! Я уверена, что без вашей помощи не разобралась бы. Правда и сейчас не очень понимаю, почему айдишники не определялись, ведь таблицы существовали и до этого.
Скажите, как вы изучали этот язык, хочу это понимать.
я имею ввиду книги и прочее
0
vovandr
629 / 517 / 139
Регистрация: 19.08.2013
Сообщений: 1,399
15.01.2014, 02:13 #44
PinkPink книжку с носорогом Флэнэгана вам советую, там все вприницпе есть что надо по js. А по jquery даже не знаю что посоветовать, просто материал впринципе везде одинаково подаётся (как вариант jquery для профессионалов изд Вильямс).
1
Vovan-VE
15.01.2014, 16:09     Удалить элемент
  #45
 Комментарий модератора 
PinkPink, vovandr, Код должен быть в тексте сообщения. Песочницы — это бонус.
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
15.01.2014, 16:09
Привет! Вот еще темы с ответами:

Удалить элемент-строку из массива - JavaScript
Массив в виде: var mas= new Array(); //stolbiki for (var i = 0;i&lt;4; i++) { mas = new Array(); } при...

Не получается удалить элемент из div-а - JavaScript
Подскажите, пожалуйста, почему, когда я нажимаю на кнопку с именем delBtn_индексКнопки у меня консоль пишет Uncaught TypeError: Cannot call...

Удалить повторяющийся элемент в динамическом массиве - JavaScript
скажите пож, а как можно удалить повторяющийся элемент, если у нас идет сравнение двух массивов, и они динамические?

как удалить элемент массива в Knockout js - JavaScript
не очень понимаю, как правильно надо удалять элементы массива, на коде будет понятнее : function ViewModel() { var self = this; ...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
45
15.01.2014, 16:09
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru