2013-12-19 5 views
0

У меня есть td, содержащий список значений (теги привязки), которые разделены запятой.jQuery: удалить некоторые части строки

Можно ли создать кнопку для удаления определенных значений из этой строки, например. 1-го или 2-го или 3-го значения?

Сначала я попытался разрешить это с помощью плагинов tagmanager, но все теги-менеджеры, которых я знаю, работают только с текстом, но не со ссылками/якорьными тегами, поэтому вышеупомянутое предназначено для работы здесь.

Фон состоит в том, что у меня есть страница, которая показывает список загруженных файлов в виде ссылок (созданных с помощью PHP), и я хотел бы разрешить пользователям удалять одну или несколько из этих ссылок, если они больше не нужны. Значение всех ссылок - это слово «Файл» и число, например. Файл 1, Файл 2, Файл 3 и т.д.

Пример тд:

<td> 
<a href="link1" target="_blank">File 1</a>,<a href="link2" target="_blank">File 2</a>,<a href="link3" target="_blank">File 3</a>,<a href="link4" target="_blank">File 4</a>,<a href="link5" target="_blank">File 5</a> 
</td> 

спасибо за любую помощь в этом, Tim.

ответ

1

Вы можете добиться этого эффекта несколькими способами. Это может быть полезно, если вы хотите иметь отдельную кнопку для удаления каждой ссылки.

Просто поместите button после каждого звена и назначить click событие что-то вроде:

$('button').click(function(){ 
    $(this).prev('a').remove(); 
    $(this).remove(); 
}); 

DEMO

+0

Я собираюсь с этим решением - спасибо за помощь! – user2571510

1

Ваше самое простое решение было бы обернуть детали (и запятые) в <span> теги:

<span class="file1"><a href="link1" target="_blank">File 1</a>,</span> 
<span class="file2"><a href="link2" target="_blank">File 2</a>,</span> 
<span class="file3"><a href="link3" target="_blank">File 3</a>,</span> 
<span class="file4"><a href="link4" target="_blank">File 4</a>,</span> 
<span class="file5"><a href="link5" target="_blank">File 5</a></span> 

Тогда вы можете просто использовать JQuery, чтобы удалить весь span:

$('.file1').remove(); 
2

Вы можете установить td иметь идентификатор, например <td id="myID">, а затем вы можете очень легко выбрать n-й ребенок этого td с помощью jQuery:

var index = 4; // or whatever you want it to be 
$("#myID a:nth-child(" + index + ")").remove(); 

Если вы не хотите, чтобы установить идентификатор тд, вы, конечно, можете выбрать это по-другому, например, с помощью

$("td:nth-child(" + tdNum + ")"); // for the td 
$("td:nth-child(" + tdNum + ") a:nth-child(" + linkNum + ")"); // for the links 
+0

Спасибо за это. Будет ли это работать и в IE 8 и IE 9? – user2571510

+0

Работает на IE 7,8 и 9.(Протестировал его в онлайн-эмуляторе, не знаю точно) – anestv

1

Я хотел бы сделать ссылки выглядят интерактивными теги, которые при щелчке удалите себя.

<td> 
    <a href="link1" target="_blank">File 1</a> 
    <a href="link2" target="_blank">File 2</a> 
    <a href="link3" target="_blank">File 3</a> 
    <a href="link4" target="_blank">File 4</a> 
    <a href="link5" target="_blank">File 5</a> 
</td> 

Затем с помощью JavaScript, чтобы сделать ссылки «удалить» по щелчку

$('a').on('click', function(e){ 

    this.remove(); // remove the clicked "<a>" tag 

    e.preventDefault(); // prevents the link from going anywhere 
}) 

Вот working example

И here is an example, что позволяет получить более подробную информацию о каждом нажатии на ссылку поэтому вы можете сделать запрос на стороне сервера, чтобы удалить товар

Смежные вопросы